14.useEffectHook.md

Become a Pro at the useEffect Hook with These Advanced Techniques in React

useEffect is a hook in React that allows you to perform side effects in function components. It is called after the component renders, and it takes a callback function as an argument. The callback function can be used to perform tasks such as making API calls, setting up event listeners, or updating the DOM.

One of the main benefits of using useEffect is that it helps you manage side effects in a declarative way, rather than using imperative code. This can make your code easier to understand and debug.

Here's an example of how you can use useEffect to make an API call in a React component:

import { useState, useEffect } from "react";

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("/some/api/endpoint");
      setData(response.data);
    }
    fetchData();
  }, []);

  return <div>{data && <p>Data: {data}</p>}</div>;
}

In this example, the useEffect hook is called after the component renders, and it makes an API call to fetch some data. The data is then stored in the data state using the setData function.

The second parameter of the useEffect hook is an array of values that determines when the effect callback function should be called. If the array is empty (as in the example above), the effect callback function is only called after the initial render.

If you pass an array of values as the second parameter, the effect callback function will be called whenever one of those values changes. For example:

import { useState, useEffect } from "react";

function Example(props) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/some/api/endpoint/${props.id}`);
      setData(response.data);
    }
    fetchData();
  }, [props.id]);

  return <div>{data && <p>Data: {data}</p>}</div>;
}

Exceptions and Limitations

There are a few exceptions to this rule: you do not need to add state updating functions as dependencies, as they are guaranteed to never change. You also do not need to add "built-in" APIs or functions like fetch() or localStorage, as they are independent from React and your components and do not change. Similarly, you do not need to add variables or functions defined outside of your components as dependencies, as changing them will not affect your components.

It is important to understand these exceptions in order to avoid unnecessary re-evaluations of your side effects, which can improve the performance of your application.

useEffect() cleanup Function

he cleanup function in useEffect is a callback function that is called just before the effect is unmounted or re-run. This can be useful for performing tasks such as cleaning up event listeners or canceling network requests.

In general, the cleanup function is called whenever the component that uses useEffect unmounts, or whenever the dependencies of the useEffect hook change and the effect is re-run.

import { useState, useEffect } from "react";

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let cancelRequest = false;

    async function fetchData() {
      const response = await fetch("/some/api/endpoint");
      if (!cancelRequest) {
        setData(response.data);
      }
    }
    fetchData();

    return () => {
      cancelRequest = true;
    };
  }, []);

  return <div>{data && <p>Data: {data}</p>}</div>;
}

In this example, the useEffect hook makes an API call to fetch some data. The cancelRequest variable is used to cancel the request if the component unmounts before the request is complete. The cancelRequest variable is set to true in the cleanup function, which is called just before the component unmounts.

Summary

• Executes after the component renders.
• If no second parameter is specified, the effect function always executes when the component renders.
• If a second parameter is specified and it is an empty array, the effect function only executes the first time the component renders.
• If a second parameter is specified and it is a non-empty array containing mutable values, the effect function only executes when the values in the array change.
• The cleanup function does not execute the first time the component renders.
• The cleanup function executes before the effect function the next time it is called.
• useEffect is helpful for performing tasks like fetching data, sending HTTP requests, and validating forms."