title: React hooks how to better update multiple states based on props change
body: <p>Say I have a table with sort data and I want to store it on a <a href="https://reactjs.org/docs/hooks-reference.html#usestate" rel="nofollow noreferrer">state</a> (or even 3 separated states). Assume this state could be changed by the child.
  Is there anyway to do this <strong>without having 3 different <a href="https://reactjs.org/docs/hooks-effect.html" rel="nofollow noreferrer">useEffects</a></strong>, I would like to see if it is possible to achieve the same as below with <strong>only 1 use effect</strong>?</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  
  function Table({ initialSortDirection, initialSortParam, initialSortEnabled }) {
      const [currentSortData, setSortData] = useState({
          sortDirection: initialSortDirection,
          sortParam: initialSortParam,
          hasSort: initialSortEnabled
      });
      useEffect(() =&gt; {
          setSortData({ ...currentSortData, sortDirection: initialSortDirection });
      }, [initialSortDirection]);
      useEffect(() =&gt; {
          setSortData({ ...currentSortData, sortParam: initialSortParam });
      }, [initialSortParam]);
      useEffect(() =&gt; {
          setSortData({ ...currentSortData, hasSort: initialSortEnabled });
      }, [initialSortEnabled]);
     return (&lt;SomeComponent onChangeSort={setSortData} /&gt;)
  }
  </code></pre>
  
  <p>On a old school way I would probably use <a href="https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops" rel="nofollow noreferrer">componentWillReceiveProps</a> and just compare nextProps to see if they changed but now I am having difficult on finding a concise way to do it "at once" and only on change.</p>
  
  <p>As a visual example consider the image below, you could change the sort either from clicking on the cell or from changing the "knobs".
  <a href="https://i.stack.imgur.com/PTLkv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PTLkv.png" alt="enter image description here"></a>
  <strong>EDIT 1</strong></p>
  
  <p>Assume that other things could affect the state and I do not want to override an updated state with an unchanged initial prop . I updated the code accordingly</p>
  
  <p><strong>EDIT 2</strong>
  Added storybook picture</p>