<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 <code>useEffect</code> hook here: <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(() => {
  /* 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(() => {
  /* 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(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>



<h2>All three combined</h2>



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

  /* componentWillMount code + componentDidUpdate code */

  return () => {
   /* 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>

React's&nbsp;useEffect&nbsp;hooks combines&nbsp;componentDidMount,&nbsp;componentDidUpdate&nbsp;and&nbsp;componentWillUnmount&nbsp;lifecycle meth...

React: useEffect explained with lifecycle methods