Mastering React Series: useEffect Hook

useEffect is a Hook in React that allows you to manage side effects in your functional components. A side effect is any state or behavior change that occurs outside of the render function. Some common examples of side effects include:

  • Fetching data from an API
  • Setting and updating a timer
  • Listening to and responding to browser events
  • Updating the document title

With useEffect, you can run these side effects and keep your components clean and focused on rendering UI.

Usage syntax :

useEffect takes two arguments : 

The first argument to useEffect is a function that contains your effect code. This function is called every time your component is rendered, and its purpose is to manage your side effect.

The second argument is an optional argument to useEffect is an array of dependencies. This array is used to tell React when to re-run your effect. There can be three scenarios : 

I. Passing a dependency array with some states: In this case, useEffect will run at the initial render and at every re-render when any of the mentioned states changes.

II. Passing an empty dependency array: In this case, useEffect will run only at the initial render.

III. Passing no dependency array at all: In this case, useEffect runs after every single render (and re-render) of your component.

Cleanup Function

It’s important to understand that side effects can cause unintended consequences if they’re not managed correctly. For example, if you don’t cancel a timer that was set in a previous render, it will continue to run even after the component has been unmounted, causing a memory leak or if we didn’t remove the resize event listener that we added in useEffect, we could end up with multiple event listeners that keep updating the width state even after the component has been unmounted. To prevent these problems, useEffect has a cleanup mechanism. The function you pass to useEffect may optionally return a cleanup function. This function is called when your component is about to be unmounted, or when your effect is about to be re-run, and its purpose is to clean up any state or behavior that your effect created. For example : 

Conclusion

useEffect is a powerful tool for managing side effects in your React components. It's used to run code that affects the state or behavior of your component, and it can be used to handle tasks like fetching data, setting timers, or responding to browser events.

Comments

Post a Comment

Popular posts from this blog

Mastering React Series: The Virtual DOM & Reconciliation

Image
Before we dive into the Virtual DOM, let's first understand what a DOM is. The Document Object Model (DOM) is a tree-like structure that represents the HTML of a web page and enables JavaScript to manipulate its content and structure. The DOM is a live representation of the web page and changes to the DOM are immediately reflected in the web page. The Virtual DOM, on the other hand, is a lightweight in-memory representation of the actual DOM. When the state of a React component changes, React updates the Virtual DOM, instead of the actual DOM, to determine the most efficient way to update the UI. This process is known as reconciliation. Reconciliation is done by the diffing algorithm, which is a breadth-first approach process that compares the current and previous versions of a React component's Virtual DOM to determine the most efficient way to update the actual DOM. The goal of the diffing algorithm is to minimize the number of changes made to the actual DOM, resulting in a f...
Read more

Mastering React Series: Class Components Life Cycle Methods

Image
Class components in React have several lifecycle methods that are called at different stages of a component's lifecycle. These methods provide a way to perform actions at specific points in a component's lifecycle, such as when the component is mounted, updated, or unmounted. Understanding the class component lifecycle methods and their usage is critical for building performant and efficient React applications. Different life cycle methods are :  constructor componentWillMount render componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount Here is a detailed explanation of the class component lifecycle methods:   I. Constructor :   The constructor method is a special method in class components that is called when a component is created and initialized. It is used to set the initial state of a component and bind event handlers to the component instance. The constructor method is the first method that is...
Read more

Mastering React Series: React Components

Image
React Components are the building blocks of any React application. They are independent, reusable, and composable units that define a piece of the UI. In React, everything is a component, including the UI, forms, modals, etc. Types of React Components There are two main types of React Components: Class Components Function Components Class Components Class components are JavaScript classes that extend React.Component class. They use a class-based syntax to define a component, and they are used when you need to handle state or lifecycle methods. Example:   Lifecycle Methods in Class Components Class Components have lifecycle methods that allow you to perform actions at specific points during the component's lifecycle. These methods are called automatically by React, and they give you control over the component's behavior and state. Examples of lifecycle methods include: componentDidMount: called after the component has mounted (added to the DOM) componentDidUpdate: called after t...
Read more