Zustand causing more rerenders than expected

[jhalborg]

Hello 👋

I am trying to convince my team (and myself) that is is worth for us to switch from using React Context as state management to Zustand. To better illustrate the value gained, I made a code sandbox with a simple component that uses either as their state management. The component hosts

• a button to incremement a count
• a component to show the count
• a component to show another part of the state that is not updated
• a component that shows how many times each rerendered

Each store has two variables, a number and a string. The string variable is never updated, so I did not expect the component that listens to that part of the state to be updated when the count updates - but it does. This is one of the key value propositions of Zustand over React context.

I'm new to Zustand, and I can't seem to figure out what I'm doing wrong. Any help would be much appreciated 😄

https://codesandbox.io/p/devbox/react-context-vs-zustand-85h59c

[dbritto-dev]

@jhalborg you should use useShallow each time you want to use useMyStore in order to prevent extra renders and apply shallow comparisons to your selectors so the ShouldNotUpdate component should looks like this:

const ShouldNotUpdate: FC = () => {
    const variable1 = useMyStore(useShallow((state) => state.variable1));
    return <div style={{ backgroundColor: 'brown' }}>
        <h3>This should NOT update when using Zustand!? {variable1}</h3>
        <RerenderCounter />
    </div>
}

[dai-shi]

If that's the case, I think it doesn't update the state immutably.

[jhalborg]

Thanks for getting to this so quickly @dbritto-dev . I updated the sandbox to reflect that suggestion, but it doesn't help any.

Also, as far as I can understand from the docs, selecting a single variable from store state should be fine without using the useShallow hook, as that is the default comparison algorithm? That it was only recommended to use selector with useShallow when selecting multiple slices from state?

[dbritto-dev]

@jhalborg I found the issue you are updating the parent so that trigger new renders on children. You can try using memo on ShouldNotUpdate

[jhalborg]

You were right, thank you. Extracted updating component into own component, now it works as expected.

Although, I would not expect the children to update even if the parent updates, as they receive no props from the parent that should cause them to rerender. Do you know why this happened?

[dbritto-dev]

@jhalborg actually, people forget that react re-render everything by default and that's ok but if you want to avoid that you can use memo

[jhalborg]

Right again, thank you.

https://codesandbox.io/p/devbox/react-rerender-rvfn8d

I'll stop bothering you now :) Have a great night!