useEffect Hook

The useEffect hook allows us to synchronize the component with external factors/services, including fetching data, subscriptions, manual changes, etc.

Syntax:

The first argument (setup) is an arrow function that will be executed after every render. The second argument (dependencies) is an optional array of dependencies. If the dependencies are provided, the effect will only be re-executed if one of the dependencies has changed since the last render. If the dependencies array is omitted, the effect will run after every render.

Since we know that the setup must be an arrow function and the dependencies must be an array, we get the following record of the useEffect hook.

Note

React components often rely on the combination of useEffect and useState hooks. These hooks work hand in hand to manage state and side effects within components.

Example 1:

Let's create the Articles component, which will utilize the useEffect hook to assign data to the articles state. This is an excellent opportunity to explore the powerful combination of React hooks.

Within this component, we leverage the useEffect hook to ensure that the articles state is populated with data. As mentioned earlier, the useEffect function executes after each render, guaranteeing that data will be displayed to the user if obtained. This ensures a seamless user experience with up-to-date content.

Line by line explanation:

• Line 1: We import the useEffect and useState hooks from the React library to leverage its functionality;
• Line 2: We import the fetchData function from the "../service/api". This function is responsible for making an API request and fetching data;
• Line 4: The Articles component is defined using the conventional function syntax;
• Line 5: We initialize the state using the useState hook, representing the initial value of the articles variable. In this example, it is an empty array;
• Lines 7-15: The real use case of the useEffect hook;
  • Line 7 and line 15: is the syntax. It's how we will use it;
  • Line 8: the fetchData function is called. This function is expected to make an API request and return a promise;
  • Lines 9-11: When the promise is resolved (then block), it receives a resp object. The data is extracted from resp using resp.jokes, which is set into the articles state using setArticles;
  • Lines 12-14: If there's an error during the API request (in the catch block), it's logged to the console using console.error.
• Lines 17-19: The component's markup is rendered.

Full app code:

Example 2:

Let's create the Counter component to track a counter value. The task is to log the value of the counter variable each time it changes. To achieve this, we will utilize the useEffect hook with a dependency array consisting of the counter variable.

Line by line explanation:

• Line 1: We import the useEffect and useState hooks from the React library to leverage its functionality;
• Line 3: The conventional function syntax defines the "Counter" component;
• Line 4: We initialize the state using the useState hook, representing the initial value of the count variable. In this example, it is 0;
• Lines 6-8: The actual use case of the useEffect hook;
  • Line 7: this logic will occur whenever the value in the dependency array changes. In this case, it is the count variable;
  • Line 8: dependency array. We let React know that when the value of the count variable is changed, run the code inside of the useEffect hook function.
• Lines 14-19: The component's markup is rendered.

Full app code:

Please take a moment to inspect the console and observe the execution logic of the arrow function inside the useEffect hook. The arrow function is first executed on the initial render and then called again whenever the value of the counter variable changes. You can verify this behavior by observing the corresponding logs in the console.