Avoiding store reinitialization with unstated

Question

I am trying out unstated (https://github.com/jamiebuilds/unstated) and like its simplicity but am experiencing unexpected behavior. At the top level I have:

<Provider>
  <Subscribe to={[MyDataContainer]}>
    {myDataStore => (
      <TopLevelComponent dataStore={myDataStore} />
    )}
  </Subscribe>
</Provider>

Then way down my component tree, I access the store again using something like this:

  <Subscribe to={[MyDataContainer]}>
    {myDataStore => (
      <Leaf dataStore={myDataStore} />
    )}
  </Subscribe>

This works great as long as my tree stays the same. As soon as I have a state change that requires rebuilding the leaves, the state object in my data container gets re-initialized and wiped out. What am I doing wrong?

Answer 1

I think you can solve this in two different ways:

1. Expose an instance of your Container instead of the class.
2. Instantiate the Container and inject it in your <Provider>.

In the first option, the instance remains the same on every import, and you will have <Subscribe to={[instance]}>. Unstated doc

In the second, you can do <Subscribe to={[ContainerClass]}> but Unstated will try to resolve if there is an instance of that class injected through the <Provider> and use that instance instead of re-instantiate. Unstated doc

Answer 2

I solved this by moving the Provider to the App level, above any component that receives props/re-renders.