title: react: Should I put all side effect logic inside useEffect
body: <p>I want to track when user click the button, and send the record to server.</p>
  
  <p>and I am thinking where should I put the "send the record to server" logic in my component</p>
  
  <p>to put it inside onClick handler or move it to <code>useEffect</code></p>
  
  <p>first version:</p>
  
  <pre class="lang-js prettyprint-override"><code>function Btn() {
    return (
      &lt;Button onClick={(e) =&gt; {
        // is doing side effect inside onClick handler a good practice ?
        sendRecordToServer({ btnName: 'btn1' });
      }}&gt;
        click &amp; track me
      &lt;/Button&gt;
    )
  }
  </code></pre>
  
  <p>then I noticed the doc of <code>useEffect</code> said</p>
  
  <blockquote>
    <p>Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.</p>
  </blockquote>
  
  <p>so my second version:</p>
  
  <pre class="lang-js prettyprint-override"><code>function Btn() {
    // introduce a new state
    const [track, setTrack] = useState()
  
    // doing side effect inside useEffect
    useEffect(() =&gt; {
      if (track) {
        sendRecordToServer(track);
      }
    }, [track])
  
    return (
      &lt;Button onClick={(e) =&gt; {
        // has to be a object to make the effect can re-run, not simple string
        setTrack({
          btnName: 'btn1'
        })
      }}&gt;
        click &amp; track me
      &lt;/Button&gt;
    )
  }
  </code></pre>
  
  <p>Can someone tell me which version is nicer ?</p>