#when does the loader load?? and why is this happening like this?

1 messages · Page 1 of 1 (latest)

tawny jetty
# 
  
  useEffect(()=>{
    console.log('Root Mounted')
    return()=>{console.log('Root unmounted')}
  },[])
  useEffect(()=>{
    console.log('root rendered')
  })
  return(
    <div style={{backgroundColor:'grey'}}>
      <Link to={'/'}>to home</Link>
      <h2> Root Page</h2>
      <Link to={'child'}>to child</Link>
      <br/>
      <Outlet/>
    </div>
  )
}

function Child(){

  useEffect(()=>{
    console.log('Child Mounted')
    return()=>{console.log('Child unmounted')}
  },[])

  useEffect(()=>{
    console.log('child rendered')
  })

  return(
    <div style={{backgroundColor:'white'}}>
      <h3>Child</h3>
      <Link to={'/'}>To home</Link>
      <br/>
      <Link to={'/anotherroot'}>Another root</Link>
    </div>
  )
}


const router = createBrowserRouter([
  {
    path:'/',
    element:<Root/>,
    loader:()=>{console.log('inside root loader');return null},
    children:[
      {
        path:'child',
        element:<Child/>,
        loader:()=>{console.log('inside child loader');return null},
      }
    ]
  },{
    path:'anotherroot',
    element:<AnotherRoot/>,
    loader:()=>{console.log('inside another root loader');return null},
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

    <RouterProvider router={router}/>

);``` Im trying to understand how loader functions are called

when i navigate to '/' for the first time it logs ```inside root loaded, root mounted, root rendered``` .  From there when i navigate to '/child' it logs ``` inside child loader, child mounted, child rendered```. When i go back to '/' from here it shows ```child unmounted``` . Now im back to '/' and navigate again to '/' which shows ```inside root loader```. 
why is the root loader not called when going from '/child' to '/' but gets called when i go from '/' to '/' . The root comp is already mounted and its not even getting rerendered but root loader function gets called.
#

These are the logs im getting
when i navigate to '/' for the first time : inside root loaded, root mounted, root rendered .
From there when i navigate to '/child' : inside child loader, child mounted, child rendered.
When i go back to '/' from here it shows child unmounted .
Now i navigate again to '/' which shows inside root loader

slim solstice
#

Root -> child: we know the root layout won’t change so data isn’t refetched

#

Root->Root: this emulates browser behavior. When you navigate to exactly where you are, we reload all loaders (you only have one observed here) and do a replace instead of push to the history stack. In other words, it’s treated as a “refresh”

tawny jetty
#

In case of Root -> child data wont be refetched even when im using navigate('child',{replace:true})
What about the Child -> root case, child might have changed some data right? Root loader is not called in this case. So if we want to change something in root layout it should be done with setState right?

slim solstice
#

If you use loaders, actions, and forms (and useSubmit), react router will automatically keep your UI in sync with your data and you don’t generally need to think about this stuff anymore … at least that’s the hope and design 🙂