Initial state from a component? about zustand HOT 6 CLOSED

@drcmda if you use a callback, your component still rendering twice. Once for the initial value and then after you call the init, right?

And that would the the same as using useEffect

const { value, setValue } = useStore();
useEffect(() => {
    setValue(initValue);
  }, [initValue]);

Btw, cool game!

from zustand.

function A(props) {
  const [[useStore]] = useState(() => create(set => ({ a: props.a }))

i usually use a callback though, an init() function that i call after components have been created. here's a recent example: https://codesandbox.io/s/react-three-fiber-untitled-game-i2160 (down there where the canvas component it, needed the store to be global, but relies on the camera, which is created later).

from zustand.

Look like resolved. Please file a new issue for further discussion.

from zustand.

yes, that would add one render.

from zustand.

creating the store inside the components state won't allow you to have an initial state. Once the component is unmounted the state is destroyed as does the store. So basically putting the store in state is the same as just using the state by itself

from zustand.

@joelmoss, you can do it in that way too

const [useStore, api] = create(set => ({
  a: "dafaultState",
  set: fn => set(produce(fn))
}));

const ExampleComponent = ({ a }) => {
  const initialState = { a };
  const ref = useRef(initialState);
  const state = ref.current;
  const store = useStore();

  useEffect(
    () =>
      api.subscribe(
        state => {
          if (state) {
            ref.current = state;
          }
        },
        state => state
      ),
    []
  );

  return (
    <div
      onClick={() =>
        store.set(state => {
          state.a = "nextState";
        })
      }
    >
      Test: {state.a}
    </div>
  );
};

https://codesandbox.io/s/elastic-sutherland-r43x5

from zustand.