title: Can I set state inside a useEffect hook
body: <p>Lets say I have some state that is dependent on some other state (eg when A changes I want B to change). </p>
  
  <p>Is it appropriate to create a hook that observes A and sets B inside the useEffect hook? </p>
  
  <p>Will the effects cascade such that, when I click the button, the first effect will fire, causing b to change, causing the second effect to fire, before the next render? Are there any performance downsides to structuring code like this?</p>
  
  <pre><code>let MyComponent = props =&gt; {
    let [a, setA] = useState(1)
    let [b, setB] = useState(2)
    useEffect(
      () =&gt; {
        if (/*some stuff is true*/) {
          setB(3)
        }
      },
      [a],
    )
    useEffect(
      () =&gt; {
        // do some stuff
      },
      [b],
    )
  
    return (
      &lt;button
        onClick={() =&gt; {
          setA(5)
        }}
      &gt;
        click me
      &lt;/button&gt;
    )
  }
  </code></pre>