createContext not working as expected

[karthikcodes6]

Hey everyone, I just tried to use the createContext API but it seems saving the state in a global and updating changes to all the contexts instead of the particular single context.

Here is the reproducible code sandbox link - here

This is the expected result here

[karthikcodes6]

It seems like working now. The mistake was I initiated the store outside from the component. So, it was using the same store for all the components instead of creating a new store.

overall code

import "./styles.css";
import create from "zustand";
import createContext from "zustand/context";

const { Provider, useStore } = createContext();

// Before store = create(...)
const store = () =>
  create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 })
  }));

const Button = () => {
  return (
    <Provider initialStore={store()}>
      {/** Before - initialStore={store} */}
      <ButtonChild />
    </Provider>
  );
};

const ButtonChild = () => {
  const state = useStore();
  return (
    <div>
      {state.bears}
      <button
        onClick={() => {
          state.increasePopulation();
        }}
      >
        +
      </button>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Button></Button>
      <Button></Button>
    </div>
  );
}

[dai-shi]

I originally suggested to pass createStore={create} to the Provider to avoid this misusing, but then we discussed and agreed that initialStore={create()} is more flexible. Maybe a doc issue?

[karthikcodes6]

Yes, the documentation is incorrect.

[dai-shi]

Mind opening a PR?

[karthikcodes6]

Sure. I'm on it.