Is the syntax between state slice selection and transient update equivalent?

[jwrubel]

Hi - I have a fairly complex implementation of zustand (I really like this library btw - it feels like a great balance of power and easy of use) for a game I'm building in react-three-fiber. I'd built out my state management using the slice selection syntax e.g. const foos = useStore(state => state.foos) . Now I'm going back through to address performance by migrating selects for frequently-updating data as described here and I'm seeing some unusual behavior. Using const foosRef = useRef(useStore(.getState().foos)) where foo is an array whose members are created using a createFoos() function in the same store, foosRef.current does not seem to pick up the changes until I re-render the component that's binding it.

I'm trying to see what the fastest way is to create a minimal reproducible example is, but in the mean time, for a case where some store fetches use the transient update syntax and others do not, can you think of any reason why that could cause the problem I'm describing?

[jwrubel]

I think I figured out the issue here. My Store looks generally like:

const useStore = create((set, get) => ({
  foos: [],
  createFoos: () => {
    ...
    set(state => ({ foos: createdFoos }));
},
...

In a component I call createFoos() and I can verify they're created and now part of the state.

In a component that's part of a react-three-fiber canvas I have:

const Foos = () => {
  const foosRef = useRef(useStore.getState().foos);
  useEffect(() => {
    useStore.subscribe(
      foos => (foosRef.current = foos), 
      state => state.foos
    )
  }, [])
  
  const renderFoo = (foo) => {
    return <Foo key={foo.id} data={foo} />
  }
  
  return (
    foosRef.current.map(foo => renderFoo(foo))
  )
}

This worked fine when I was using the state slice selector because it would re-render every time, but now that it's using the ref, the component doesn't re-render so the call to .map never fires with updated values after createFoos() is called.

I am fine with forcing a re-render of the component when foos changes because it's very infrequent. Off the top of my head I can see either adding foosRef.current to the dependencies in useEffect as a possible solution, or potentially using a local setState or trying to implement something in a useFrame hook to serve as a bridge to the return value - maybe with a forwardRef or something.

Is there any pattern here you would recommend? Or is the structure I have above not a good pattern? Sorry for what must seem a very basic question but having to think about the render loop this closely isn't something I have had to do before, so these are all new design patterns to consider.

[dai-shi]

Hi, I'm a bit lost, but here's some notes.

• Your snippet seems correct if you want to avoid re-rendering when foos changes.
• You can trigger re-render in other ways at your timing.
• If you want to update every time foos changes (=non-transient), just use useStore.

Hmm, having that said, I don't think I understand your requirement...

[jwrubel]

🤦 I apparently had a race condition that was exposed by removing all the re-renders. Thanks so much for your help and sorry to waste your time. Thank you for maintaining this library. I'm really enjoying it.

[dai-shi]

You are welcome!