UseEffect Behind the scenes in React

Before knowing more about useEffect and deep understanding of react. I recommend you familiarize these concepts of javascript.

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

As react developers, one of the most important concepts is to understand how useEffect works.

Principles of useEffect

UseEffect is used to perform side effects in our react component.

What is side effect?

A side effect refers to any operation that interacts with the world outside the confines of a React component.

We perform a side effect when we need to reach outside of a react component to do something!!

Some common side effects:

• Fetching data from API.
• Updating the DOM document and window.
• Timer functions setTimeout and setInterval.

The signature of useEffect in react:

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

Or only works with this code:

useEffect(() => { 
    // execute side effect
})

After giving some basic theory about useEffect, let's check some practice!!

One simple example with useEffect:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

What are we doing in this code?

• The component initially renders with count set to 0.

• The useEffect hook updates the document title to "0 new messages!"

When the button is clicked:

• The setCount function is called, incrementing the count state.
• The component re-renders with the updated count value.
• The useEffect hook triggers again, updating the document title to reflect the new count.
• This code demonstrates the basic usage of the useState and useEffect hooks in React to manage state and perform side effects, creating a simple counter that updates the document title.

The useEffect will run with every single change of the component.

UseEffect with empty array

We will do a small change in the code:

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

We are adding a empty array in the parameters of useEffect.

• It will run only when the component is created or initialized.

It is very useful when we are fetching data, in that case we know we should run the portion of code only one time.

useEffect with variables

A variation of useEffect is adding a variable (one and more).
When this var changes the portion of code will run.

Let's check an example:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

We have added a new var with useState and added useEffect deppending of newCount.

It will render in this cases:

• At the beginning of the component to set newCount to the title of the page.
• After detect change on newCount var.

Note: You can pass more variables adding comma

useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount, otherVar])

UseEffect with cleanUp function

In some cases we need to cleanup some funcionalities like promises.

We are going to deep into it with an example.

Create a timer and show it in the page.

We can do this with setInterval, but if we don't implement the cleanup, the timer will be consuming resources and the app will be slow.

So we have to return the clearInterval.

Here we have the code.

import {useState, useEffect} from "react";

export default function App() {
    const [time, setTime] = useState(0);


    useEffect(() => {
      const timer = setInterval(() => {
        setTime(time + 1);
        console.log('useEffect with cleanup Function');
      }, 1000)

      return () => {
        console.log('Running cleanup function');
        clearInterval(timer);
      }
    })


    return (
        <div>
           <h3>Timer {time}</h3>
        </div>

  )
}

Conclusion:

A small brief about useEffect.

useEffect.-

UseEffect is used to perform side effects in a react component.

The side effecs could be:

• Fetching data from API
• Updating the dom - document, window
• Timer events - setInterval, setTimeOut

useEffect(callback, dependencies)

1 Where callback is the function - sideEffect logic - What to run.
2 Dependencies - Array of variables (optional) - When to run.

Finally we have three variations of useEffect:

1. UseEffect without dependencies - It runs with first render and also run on any changes detected.

2. UseEffect with empty array - It runs only on first render.

3. UseEffect with variables - It runs on first render and runs on that variable changes.

4. UseEffect with cleanup function - Timeouts, subscriptions, event listeners or other funcionts to unsuscribe or no needed after use it can be disposed with cleanup functions.