ashok-khanna/react-snippets

A sample of useful snippets in React

react-snippets's Issues

unnecessary renders?

Any time you <Component/> you are rendering it - the function (or the full component create/render) is being called even though due to the route it won't be on the screen. So here, every single route is rendered, need it or not, with all of the internal side effects (like useEffect calls to load data from the server that'll never be seen or used).

A way to avoid that is to have the Router do the rendering instead.

   const routes = [{path:"/", component:Home}, {path:"/login", component:Login, props: { someProperty: someValue}]
   const defaultComponent = { component: NoPageExists, props: {} }

   return (
      <Router routes={routes} defaultComponent={defaultComponent}/>
      )

now internally:

const component = routes.find(({path, component}) => path === currentPath)?.component || defaultComponent
const props = component.props || {};
// and here we now have the advantage of being able to inject some routing state info to props if we like
return <Component {props}/>