useEffect() Hook in React

useEffect() Hook in React

Hello everyone👋, I am Hitesh Mishra, a beginner in the world of ReactJS. I have decided to document my learnings and share this newfound knowledge with the world.

Please leave comments and insights that can help me improve my skills!

In this article we are going to explore the useEffect() hook in React, let's get started!

Introduction

React's useEffect() hook is a powerful tool that allows us to handle side effects in functional components. Side effects include things like fetching data, updating the DOM, and subscribing to events. In this article, we'll explore the basics of how to use the useEffect() hook in our React projects.

In this article we are going to explore the useEffect() hook in React, let's get started!

What is the useEffect() Hook?

The useEffect() hook is a built-in React hook that lets us handle side effects in functional components. This hook is called after the component is rendered(mounted to the DOM), so we can use it to update the component's state or perform other tasks that need to happen after the component is created(or mounted to the DOM).

Why is the useEffect() Hook Useful?

The useEffect() hook is useful because it lets us handle side effects in a declarative way. Instead of worrying about when to execute our side effects, we can simply declare what they are and let React handle the rest. This makes our code easier to read and maintain, and reduces the likelihood of errors.

How to Use the useEffect() Hook

To use the useEffect() hook, we'll need to import it from the 'react' library at the top of our component file:

import React, { useEffect } from 'react';

Next, we'll need to define the useEffect() hook in our component. Here's an example of how to use the hook to update a component's state:

function MyComponent() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, we define a component called MyComponent that has a state variable called 'count' and a button that increments the count when clicked. We use the useEffect() hook to update the document title with the current count whenever it changes.

When useEffect() hook in React gets called?

The useEffect() hook in React gets called in a few different situations:

  1. On initial render: When a component using the useEffect() hook is first rendered, the effect function will be called after the browser has painted the component to the screen. This happens once, when the component is first mounted.

  2. On updates: Whenever a component's state or props change, React will re-render the component. If the component is using useEffect(), the effect function will be called again after each re-render.

  3. On unmount: When a component is removed from the DOM, either because it's no longer needed or because the user navigates away from the page, the effect function will be called one last time. This is where you can clean up any resources (like event listeners or timeouts) that were created in the effect function.

  4. On dependencies change: If the useEffect() hook has a second argument that specifies an array of dependencies, the effect function will only be called when any of the dependencies change.

In general, useEffect() is a way to run some code after a component has rendered, and it can be used to do things like fetch data, subscribe to events, or manipulate the DOM. The effect function will be called every time the component updates, so it's important to make sure the effect doesn't have any unintended side effects or cause unnecessary re-renders.

Conclusion

The useEffect() hook is a powerful tool for handling side effects in our React components. By using this hook, we can simplify our code and reduce the likelihood of errors. With a little practice, we can use the useEffect() hook to create dynamic and responsive web applications that are a joy to use.