title: How to synchronously change state within useState
body: <p>Hey guys I am new to using React Hooks but couldn't find it on google directly. I am attempting to nest setState callback so that the state can update synchronously but haven't had success as I get undefined values. The values within the state are reliant on other values within my state so I would ideally like it to run synchronously. I tried nesting it below, which works when it is a class component and use this.setState and use the callback, but doesn't work when I attempt to use react hooks within a functional class.</p>
  <p>Here is my code:</p>
  <pre><code>const [state, setState] = useState({numCols: 0, numRows: 0, cardWidth: 0, cardHeight: 0, containerWidth: 0});
    
    const {
      sheetList,
      sheetsTotalCount,
      sheetsMetadata,
      id,
      projectId,
      onEditButtonClick,
      handleInfiniteLoad,
      sheetsAreLoading,
      classes,
      permissions,
      onItemClick,
    } = props;
  
    const setCardSize = ({ width }) {
      setState({
        containerWidth: width &gt; 0 ? width : defaultWidth
      },() =&gt; { 
        setState({numCols: Math.max(Math.floor(state.containerWidth / baseThumbnailWidth), 1) }, () =&gt; {
          setState({numRows: Math.ceil(sheetList.size / state.numCols)}, () =&gt; {
            setState({cardWidth: Math.floor(state.containerWidth / state.numCols - 2 * marginBetweenCards)}, () =&gt; {
              setState({cardHeight: Math.round(state.cardWidth * thumbnailProportion)});
            });
          });
        });
      });
    }
  </code></pre>
  <p>Ideally I would like the containerWidth variable to update first, then the numCols variable, then the cardWidth, then the cardHeight. Is there any way to do this synchronously so I don't get an undefined value?</p>