<p>React's&nbsp;<code>useEffect</code>&nbsp;hooks combines&nbsp;<code>componentDidMount</code>,&nbsp;<code>componentDidUpdate</code>&nbsp;and&nbsp;<code>componentWillUnmount</code>&nbsp;lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple&nbsp;<code>useEffect</code>&nbsp;hooks to be called in a single component.</p>

<p>You can read more about the&nbsp;<code>useEffect</code>&nbsp;hook here:&nbsp;<a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React docs</a></p>

<p>Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.</p>

<h2>componentDidMount eqivalent</h2>

<p>In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* ComponentDidMount code */
}, []);</code></pre>

<h2>componentDidUpdate eqivavlent</h2>

<p>In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case,&nbsp;<code>var1</code>&nbsp;and&nbsp;<code>var2</code>).</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* componentDidUpdate code */
}, [var1, var2]);</code></pre>

<h2>componentWillUnmount eqivavlent</h2>

<p>In order to have this hook run when the component is unmounted, we need to return a function from the hook. Dependency array doesn't affect this functionality.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<h2>All three combined</h2>

<pre class="wp-block-code"><code>useEffect(() =&gt; {

  /* componentWillMount code + componentDidUpdate code */

  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<p>Thank you for taking the time to read this post. If you've found this useful, please share and feel free to comment.</p>

Master React's useEffect hook with this cheat-sheet, showing how to replicate componentDidMount, componentDidUpdate, and componentWillUnmount behaviors with clean, concise code.

React: useEffect explained with lifecycle methods