Introduction

In React, useEffect is a hook that allows you to manage side effects in functional components. Side effects are operations that are performed outside of a component, such as fetching data from a server, updating the browser's title, or setting up a timer. In class components, side effects are typically handled in lifecycle methods such as componentDidMount and componentDidUpdate. However, functional components do not have these methods, which is where useEffect comes in.

Syntax

The basic syntax of useEffect is:

useEffect(() => {
  // side effect code here
}, [dependency]);

The first argument to useEffect is a function that contains the side effect code. This function will be called after the component has rendered. The second argument is an optional array of dependencies. If any of these dependencies change between renders, the side effect function will be called again.

If you don't provide the second argument, the side effect function will be called after every render. This is not always desirable, as it can cause unnecessary work and slow down your application.

Side effects

useEffect is a powerful hook that allows you to perform many different types of side effects. Here are some common examples:

Fetching data

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

This example fetches data from an API endpoint and sets it in the component's state using the setData function. The empty array as the second argument tells useEffect that this side effect should only be run once, when the component mounts.

Setting up timers

useEffect(() => {
  const intervalId = setInterval(() => {
    setTime(time + 1);
  }, 1000);

  return () => {
    clearInterval(intervalId);
  };
}, [time]);

This example sets up a timer that increments the time state variable every second. The second argument is the time variable, which tells useEffect to run the side effect whenever time changes. The return statement in the function is used to clean up the timer when the component unmounts.

Updating the title

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

This example updates the browser's title whenever the count state variable changes.

Dependencies

The second argument to useEffect is an array of dependencies. This argument is used to tell React when to run the side effect function. If the dependencies have not changed since the last render, the function will not be called.

If you provide an empty array as the second argument, the side effect function will only be called once, when the component mounts. This is useful for performing one-time setup tasks, like fetching data.

If you don't provide a second argument, the side effect function will be called after every render. This can be expensive and slow down your application, so it's important to only run the side effect when necessary.

If you provide an array of dependencies, the side effect function will be called whenever any of the dependencies change. This is useful for updating the component in response to changes in props or state.

Cleanup

useEffect also allows you to perform cleanup when the component unmounts or when the dependencies change. To do this, you can return a function from the side effect function. This can be useful for clearing up timers, listeners, or any resources that were created inside the useEffect function. Here's an example:

function MyComponent() {
  useEffect(() => {
    const timerId = setInterval(() => console.log('Hello'), 1000);
    return () => clearInterval(timerId);
  }, []);

  return <div>Component</div>;
}

In the example above, a timer is created inside the useEffect function and the ID of the timer is returned as a cleanup function. When the component is unmounted, the cleanup function is executed and the timer is cleared.

Conclusion

The useEffect hook is a powerful tool that can be used to perform side effects in functional components. It enables you to handle component lifecycle events and manage stateful data without using class components. By understanding how the useEffect hook works, you can write cleaner and more efficient code.

In summary, the useEffect hook allows us to execute side effects in a functional component after the component has been rendered to the DOM. It takes two arguments, a function and an array of dependencies. The function is called after each render, and the dependencies array specifies which variables should trigger a re-render when their values change. Finally, the return value of useEffect is used to perform cleanup after the component is unmounted.