Prevent React component re render when route change

Question

I am using react-router-dom.

let's assume I have 2 pages like Homepage and Profile Page. Both pages have a component named a Header.

In the Header component, using useEffect React Hook I am calling a fetch request on my back-end server and fetching logged-in user data. API returns username, avatar image, etc. (that's not a problem)

thing is that. when I jump from "Homepage" to "profile page", the Header component, re-render and send the request to the server again. this occurs every time when I jump from the homepage to the profile page or profile page to the home page. and the data displayed on the Header keeps loading until the fetched request succeeds.

I want something like Youtube.

Header Component

import {useState , useEffect} from 'react'

import Logo from './imgs/logo.png'
import {Link} from 'react-router-dom'

import { FaArrowRight , FaServicestack , FaFirstOrder} from "react-icons/fa";
import { BsPersonCheck , AiOutlineContacts } from "react-icons/all";


const ShowOrHideNav = ()=>{
    var nav = document.getElementById('NavBarSpingbuck')
    nav.classList.toggle('hidden')
}


const Header = () =>{
    const [loggedIn , setLoggedIn] = useState(false)
    const [user_data , setUserData] = useState(undefined)

    const Logout = () =>{
        localStorage.removeItem('sb_auth_token')
        UpdateHeader()
    }

    const UpdateHeader = () =>{
        const auth_token = localStorage.getItem('sb_auth_token')
        if(auth_token){
            console.log('sending request')
            fetch(
                'https://dummy_API_URL.dummy_domain.com/authentication/user/',
                {
                    headers:{
                        Authorization : 'Token ' + auth_token,
                    },
                }
            )
            .then(response => response.json())
            .then(resp_data =>{
                if(resp_data.status == 200){
                    setUserData(resp_data.data)
                }
            })
            .catch(error =>{
                console.log(error)
                console.log('error')
            })
            setLoggedIn(true)
        }
        else{
            setLoggedIn(false)
        }
    }

    useEffect(()=>{
        UpdateHeader()
        
    } , [])
    return(
        
            
                
                    
                    
                    
                
                
                    
                        
                    
                
                
                    
                        
                            
                                Jobs
                            
                        
                        
                            
                                Services
                            
                        
                        
                            
                                Place Order
                            
                        
                        
                            
                                About
                            
                        
                        
                            
                                Contact
                            
                        
                    
                
                
                    {
                        loggedIn?
                        
                            
    
                            
                            {
                                user_data && user_data.username ?
                                {user_data.username}
: User

                            }
                            
                                
                                    
                                        Profile
                                    
                                    {Logout()}}>
                                        Logout
                                    
                                
                            
                        
                            

                        :
                        
                            
                                Sign in
                                
                            
                        
                    }
                
                
            
        
    )
}

export default Header

user_10579013 · Answer

Extract the Header component and place it on the same level with the Switch component.

user_8690857 · Answer

You can render your Header component on its own route, separate from the route rendering either the home or profile pages. Use an array of paths you want the header component's Route to match. Presuming "/" is your homepage then you may also want to specify the exact prop so "/" doesn't match every path you have. This all, of course, also assumes the header component is rendered before all other content on the page for each of the home and profile pages.

Example:

<Router>
  <Route exact path={["/profile", "/"]} component={Header} />
  <Switch>
    <Route path="/profile" component={ProfilePage} />
    <Route path="/" component={HomePage" />
  </Switch>
</Router>

Example:

Prevent React component re render when route change

2 Answers