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 calle
Read more

Mastering React Series: Hooks

Image
React Hooks is a feature introduced in React 16.8 that changed the way React components are written.  What are Hooks? React Hooks are simply JavaScript functions that allow you to reuse stateful logic and other React features without writing a class component. They provide a way to use state and other React features in functional components, making it easier to share and reuse logic across components. Why were Hooks introduced? Hooks were introduced to solve some of the problems that developers faced while using class components in React. Class components can become complex and difficult to understand as the state and logic grow, leading to difficulties in sharing and reusing code. Hooks provide a way to solve these problems by allowing developers to write simple and reusable logic that can be shared across components. Benefits of using Hooks: a. Reusable logic: Hooks allow you to share and reuse stateful logic across components, making your code more maintainable and reusable. b. Simp
Read more