DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Murphy Randle
Murphy Randle

Posted on

React Context Provider Gotcha

I used a global state store in my React Native app for data that needs to be available to multiple screens. I used a library to do this:
https://github.com/jamiebuilds/unstated-next, but it’s basically just a combo of React’s useState and useContext.

The problem was, screen B added data to the global store of things, then navigated back to screen A. But screen A would never have the updated state. It was almost like there were two separate stores, one for each page 🧐.

I was just beginning to pursue this thought when I remembered that React’s context β€œProvider” does make a new copy of the state for any children below itself in the tree. I was wrapping each of the pages in its own provider! Once I wrapped the whole app in a single Provider component, both pages were sharing the same state again, and page B’s triggered updates immediately reflected on page A.

react #state #context

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›