title: Updating and merging state object using React useState() hook
body: <p>I'm finding these two pieces of the React Hooks docs a little confusing. Which one is the best practice for updating a state object using the state hook?</p>
  
  <p>Imagine a want to make the following state update:</p>
  
  <pre><code>INITIAL_STATE = {
    propA: true,
    propB: true
  }
  
  stateAfter = {
    propA: true,
    propB: false   // Changing this property
  }
  </code></pre>
  
  <p><strong>OPTION 1</strong></p>
  
  <p>From the <a href="https://reactjs.org/docs/hooks-state.html" rel="noreferrer">Using the React Hook</a> article, we get that this is possible:</p>
  
  <pre><code>const [count, setCount] = useState(0);
  setCount(count + 1);
  </code></pre>
  
  <p>So I could do:</p>
  
  <pre><code>const [myState, setMyState] = useState(INITIAL_STATE);
  </code></pre>
  
  <p>And then:</p>
  
  <pre><code>setMyState({
    ...myState,
    propB: false
  });
  </code></pre>
  
  <p><strong>OPTION 2</strong></p>
  
  <p>And from the <a href="https://reactjs.org/docs/hooks-reference.html#usestate" rel="noreferrer">Hooks Reference</a> we get that:</p>
  
  <blockquote>
    <p>Unlike the setState method found in class components, useState does
    not automatically merge update objects. You can replicate this
    behavior by combining the function updater form with object spread
    syntax:</p>
  </blockquote>
  
  <pre><code>setState(prevState =&gt; {
    // Object.assign would also work
    return {...prevState, ...updatedValues};
  });
  </code></pre>
  
  <p>As far as I know, both works. So, what is the difference? Which one is the best practice? Should I use pass the function (OPTION 2) to access the previous state, or should I simply access the current state with spread syntax (OPTION 1)?</p>