Profile Photo

React: Effect Hooks

Created on: Sep 18, 2024

effect hooks

Effects connect the components and make it sync with the system. It includes changes in browser DOM, networks and other libraries.

1. useEffect:

It is a React Hook that lets you synchronize a component with an external system.It handles the effects of the dependency array. The useEffect Hook allows us to perform side effects on the components. fetching data, directly updating the DOM and timers are some side effects. It is called every time any state if the dependency array is modified or updated.

Why choose useEffect: useEffect hook is used to handle side effects in functional components, such as fetching data, updating the DOM, and setting up subscriptions or timers. It is used to mimic the lifecycle methods of class-based components. The motivation behind the introduction of useEffect Hook is to eliminate the side effects of using class-based components. For example, tasks like updating the DOM, fetching data from API end-points, setting up subscriptions or timers, etc can lead to unwarranted side effects. Since the render method is too quick to produce a side-effect, one needs to use life cycle methods to observe the side effects.

import React, { useState, useEffect } from "react";
import fetchProduct from "../lib/api";

function ProductDetails({ productId }) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);
    fetchProduct(productId)
      .then((data) => {
        setProduct(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [productId]);

  if (loading) return <p>Loading product details...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Product Details</h2>
      {product && (
        <div>
          <p>Product ID: {product.id}</p>
          <p>Product Name: {product.name}</p>
          <p>Product Price: ${product.price}</p>
        </div>
      )}
    </div>
  );
}

export default ProductDetails;

Important points:

  1. If you specify the dependencies, your Effect runs after the initial render and after re-renders with changed dependencies.
  2. If your Effect truly doesn’t use any reactive values, it will only run after the initial render.
  3. If you pass no dependency array at all, your Effect runs after every single render (and re-render) of your component.

2. useLayoutEffect:

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.This is useful for synchronously re-rendering the DOM and also to read the layout from the DOM. But to prevent blocking the page loading, we should always use the useEffect hook.

3. useInsertionEffect:

useInsertionEffect allows inserting elements into the DOM before any layout Effects fire. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want useEffect or useLayoutEffect instead.

You can find full code in my github

Links of all hooks

Reference