hookrouter icon indicating copy to clipboard operation
hookrouter copied to clipboard

useRoutes match is different every render

Open mitchellwarr opened this issue 5 years ago • 0 comments

The following does render and accurately routes

const routes = {
  '/:id*': ({ id }) => props => <MyComponent {...props} id={id} />
};

const App = (props) => {
  const res = useAPI();
  const match = useRoutes(routes);
  if (!match) return 'Page not found';
  return (
    <ErrorBoundary>
      {match({ ...props, ...res })}
    </ErrorBoundary>
  );
};

MyComponent should render and should take in props and the res of the api. It does do this, but it also unmounts and remounts with every render of App. When the useAPI updates its inner state and causes a rerender, the MyComponent remounts.

It seems like useRoutes does not memoize the reference to any function or object it creates and thus recreates them even if the route does not change

mitchellwarr avatar Feb 25 '20 01:02 mitchellwarr