title: Prevent rerenders with react hooks
body: <p>I'm implementing <code>zustand</code> for global state, but I ran into the same issue when setting up my own global state.</p>
  <p>As soon as I attach a component to a simple useStore hook, my component renders twice for every update. This happens despite:</p>
  <ul>
  <li>I don't update any state</li>
  <li>No props are changed</li>
  <li>I wrapped the component in a React.memo() just to be sure</li>
  <li>Nothing in the store (created with zustand) has changed - except for the one change that should trigger one update.</li>
  </ul>
  <p><a href="https://codesandbox.io/s/pensive-mendeleev-kxigl?file=/src/App.js" rel="nofollow noreferrer">Here's a Codesandbox</a> - a minimal example where you can check the logs - after a reload and after every update, it always logs twice. For people who rather see code without it running:</p>
  <pre><code>import React from &quot;react&quot;;
  import create from &quot;zustand&quot;;
  
  const useStore = create((set) =&gt; ({
    bears: 0,
    increasePopulation: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
    removeAllBears: () =&gt; set({ bears: 0 })
  }));
  
  const sessionId = Math.random().toString().slice(2, 7);
  
  const App = React.memo(() =&gt; {
    const { bears, increasePopulation } = useStore((state) =&gt; state);
  
    console.log(&quot;RENDER Bears&quot;, bears, sessionId); // always logs twice
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen.!&lt;/h2&gt;
        &lt;button onClick={increasePopulation}&gt;increase&lt;/button&gt;
      &lt;/div&gt;
    );
  });
  
  export default App;
  
  </code></pre>
  <p>Now, I understand that having one extra render is not really a problem, it's just that when my app grows, I tend to have a couple of those components nested into each other, so that when I <strong>do</strong> want to minimise the amount of renders, it becomes hard to know where to start.</p>
  <p><strong>So, my questions are:</strong></p>
  <ul>
  <li>Why is this happening?</li>
  <li>Can I prevent this double render and if so, how?</li>
  <li>If not, what is the proper way to deal with this?</li>
  </ul>