title: When to use useEffect?
body: <p>I'm currently looking at the react doc's example for useEffect</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  function Example() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(() =&gt; {
      // Update the document title using the browser API
      document.title = `You clicked ${count} times`;
    });
  
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  
  <p>My question is that we can easily make a handleClick function for the button. We don't have to use useEffect</p>
  
  <pre><code>const handleButtonClick = () =&gt;{
  setCount(count+1)
  document.title = `You clicked ${count +1} times`
  }
  
  &lt;button onClick={handleButtonClick}/&gt;
  </code></pre>
  
  <p>So which way is considered good practice? Is it best to only use useEffect to trigger side effects that strictly couldn't be done along with the main effect(i.e when component receive new prop)</p>