What is React JS useEffect Hook and How to use it?

The useEffect hook is a crucial part of React’s Hooks API. It allows you to perform side effects in functional components, such as data fetching, DOM manipulation, and subscription management. Essentially, useEffect helps you manage the lifecycle of a component.

In this article, we’ll delve into the useEffect hook, exploring its syntax, use cases, common pitfalls, and best practices.

The Basics: useEffect Syntax

The useEffect hook is used for handling side effects in functional components. It takes two arguments:

---

Run useEffect Hook Only Once:

If you don’t pass dependencies, then the UseEffect hook will call the effect function after each render of the component. Here is an example –

// The effect function runs after each render
useEffect(() => {
    // Code to run as a side effect
});

But, if you want to run the useEffect function only once on the initial render, then pass an empty array as the dependency argument. Here is an example –

// The UseEffect will call the function only once on the initial render.
useEffect(() => {
    // Code to run as a side effect
}, []);

---

Use Cases for useEffect Hook:

1. Data Fetching

One of the most common use cases for useEffect is data fetching. You can use it to retrieve data from APIs or perform other asynchronous operations when a component mounts or when certain dependencies change.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // Update state with fetched data
  };
  fetchData();
}, []);

2. DOM Manipulation

useEffect can also be used to interact with the Document Object Model (DOM), such as updating the title of a webpage.

useEffect(() => {
  document.title = 'New Page Title';
}, []);

3. Cleanup and Subscriptions

You can return a cleanup function from the effect, which will be executed when the component unmounts or when the dependencies change.

This is especially useful for managing subscriptions, clearing timers, or cleaning up other resources.

useEffect(() => {
  const subscription = subscribeToData();
  return () => {
    // Cleanup code (unsubscribe, clear timers, etc.)
    subscription.unsubscribe();
  };
}, [/*dependencies*/]);

import { useEffect, useState } from 'react';

function Test() {
    useEffect(() => {
        console.log('Test Mount');

        return () => {
            // Code will run when The <Test/> component is removed (unmount)
            console.log('Test Unmount');
        };
    }, []);
    return <h1>Test</h1>;
}

function App() {
    const [show, setShow] = useState(true);
    return (
        <>
            {show ? <Test /> : <h1>App</h1>}
            <button onClick={() => setShow(!show)}>Toggle</button>
        </>
    );
}

export default App;

---

Common Pitfalls and How to Avoid Them:

While useEffect is a powerful tool, it’s important to be aware of common pitfalls:

• Infinite Loops: Be careful with dependencies. If you have a dependency that changes every render, it can lead to infinite loops. Always specify the correct dependencies to avoid this issue.
• State Updates in Effects: If you update state inside an effect, and the state change triggers a re-render, make sure you’re not causing an infinite loop by unintentionally changing the effect’s dependencies.
• Cleanup: Don’t forget to handle cleanup when it’s necessary, especially for subscriptions and timers, to prevent memory leaks.
• Effects without Dependencies: If you omit the dependencies array, the effect will run after every render, which might not be what you want. Be cautious when using an empty dependency array.

Best Practices:

To make the most out of useEffect, consider the following best practices:

1. Keep Effects Simple: Each effect should have a specific responsibility. Avoid combining multiple unrelated side effects in a single useEffect.
2. Use Dependency Arrays Carefully: Ensure that the dependencies array accurately reflects the variables that the effect depends on. This helps in controlling when the effect runs.
3. Separate Concerns: If an effect is responsible for both data fetching and state updates, consider splitting it into two effects: one for fetching and another for state updates.
4. Optimize Performance: Use the useMemo and useCallback hooks to memoize values and functions when appropriate, preventing unnecessary recalculations.
5. Consider Custom Hooks: If you find yourself reusing the same useEffect logic in multiple components, consider encapsulating that logic in a custom hook to promote code reusability.

---

Conclusion:

The useEffect hook in React is a versatile tool for managing side effects in functional components.

By understanding its syntax, use cases, common pitfalls, and best practices, you can effectively handle data fetching, DOM manipulation, and resource cleanup while building robust and responsive React applications.

useEffect empowers developers to manage component lifecycle events in a more concise and readable way, making it a fundamental part of modern React development.