Skip to content

useLocation callbacks not referentially stable #4

@Nirei

Description

@Nirei

Repeated renders of a component using useLocation return new instances of setContext and setLocation. This makes it very dangerous to use this functions as they can easily trigger re-renders if you are not careful.

See for example this code:

  useEffect(
    () => setContext({ owned, installed }),
    [setContext, owned, installed],
  )

The setContext has been wrapped in a useEffect to prevent continuous triggering of setContext to retrigger full <Routes /> re-render. This fails because the effect is relaunched on every render since setContext changes to a new pointer on each render.

To prevent this, setContext and other router callbacks should be a stable ref.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions