对所有屏幕应用 React Context API 有多好

Question

Currently I have four contexts that wrap all my routes (as shown bellow) so that I don't have lost providers all around my app screens and components. As far as I know, when I modify the value of a context variable, every component that uses it will update too, what can lead to memory problems, but my question is: if my providers, that wrap all routes/screens, even the ones that uses no context variable, may cause the same memory related problems.

 <AuthProvider>
  <SelectedBranchProvider>
    <SelectedEventProvider>
      <DrawerFormProvider>
        <RightDrawerNavigator />
      </DrawerFormProvider>
    </SelectedEventProvider>
  </SelectedBranchProvider>
</AuthProvider>

Answer 1

The danger with context isn't memory issues, it's unneeded re-renders. The way Context is implemented defeats some of React's diffing, so a change in Context can cause a re-render in any component that uses the same Context, even if the value that changes is unused in the component.

If you have a small app, or only rarely change what's in your context, you'll probably never hit these limitations. Good use cases for context are things that would require many re-renders and rarely change, like user language or app theme.

The docs for Context have a caveats section that goes over this: https://reactjs.org/docs/context.html#caveats

Here's a blog post with a good example of how this can cause re-renders:https://blog.logrocket.com/pitfalls-of-overusing-react-context/