DEV Community

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)