ReactJs UseEffect Hooks

The useEffect Hook is one of the most crucial features introduced in React 16.8. It allows the functional components to use lifecycle methods to update the state without using a class component. The useEffect Hook is a combination of componentDidMount, componentDidUpdate and componentWillUnmount.

Syntax

The useEffect Hook is called inside a functional component. The syntax of the useEffect Hook is as follows:

useEffect(() => {
  // code to execute
}, [dependencies]);

The useEffect Hook takes two arguments. The first argument is a function that contains the code to be executed. The second argument is an array that contains a list of dependencies. If any of the dependencies change, the function will be executed again.

Example

Suppose we have a functional component that displays the current date and time. We would want this component to display the updated date and time every second. We could use the useEffect Hook to achieve this, as shown in the following example:

import React, { useState, useEffect } from 'react';

const Clock = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setDate(new Date());
    }, 1000);

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

  return (
    <div>
      <h1>{date.toLocaleTimeString()}</h1>
    </div>
  );
};

export default Clock;

Output

The useEffect Hook allows the functional component to update the state without the use of a class component. The output of the above example would be a clock displaying the current date and time, updated every second.

Explanation

The useEffect Hook accepts two parameters. The first parameter is a callback function that executes the code to be updated. When this parameter is called, React will remember that this callback function needs to be executed after the component renders. The second parameter is an array of dependencies. If this array of dependencies includes state updates, React will re-render the component and execute the callback function. If this array is left empty, the callback function will only be executed the first time the component is rendered.

In the above example, the useEffect Hook is called with an empty array as the second parameter. This means that the callback function is only executed once, when the component is mounted. Inside the callback function, we use setInterval to update the date and time every second. Additionally, we return a clearInterval function to stop the interval when the component is unmounted.

Use

The useEffect Hook is used to perform lifecycle actions in functional components. You can use this Hook to execute code when a component mounts, updates or unmounts. This Hook is also useful in handling side effects such as loading data, manipulating the DOM, or fetching data.

Important Points

• The useEffect Hook is called after every render of the functional component.
• The first parameter of the useEffect Hook is a callback function that includes the code to be executed.
• The second parameter of the useEffect Hook is an array of dependencies.
• If the dependency array is empty, the callback function is executed only once.
• Every time the dependency array changes, the callback function is executed again.
• If the component unmounts, the useEffect Hook can provide a clean-up function.

Summary

The useEffect Hook is a crucial feature introduced in React 16.8. This Hook allows functional components to use lifecycle methods to update state without the use of class components. In this page, we learned about the syntax, example, output, explanation, use, important points, and summary of the useEffect Hook.