title: How can React useEffect watch and update state?
body: <h1>Example code</h1>
  <pre class="lang-js prettyprint-override"><code>export function useShape (){
    const [state, setState] = useState({
      shape: 'square',
      size: {
        width: 100,
        height: 100
      }
    })
  
    // Change shape name while size update
    useEffect(()=&gt;{
      const {size: {width, height}} = state
  
      setState({
        ...state,
        shape: width===height ? 'square' : 'rect'
      })
    }, [state, state.size])
  }
  </code></pre>
  <h1>Expected</h1>
  <p>When size updated, the side effect will change the size name based on width,height.</p>
  <p>The goal is to make state consistent, so I will always get the correct shape no matter how size changes.</p>
  <h1>But got problem</h1>
  <p>The useEffect function got into a loop, if I remove the 'state' dependence it will be good, but the intelliSense requested 'state' dependence, so what's the solution?</p>