dots Created with Sketch.
Yogesh Chauhan's Blog

What does useEffect do in React?

in React on July 6, 2021

useEffect Example


import React, { useState, useEffect } from 'react';

function Example() {
  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>
  );
}


When you add useEffect hook in your React code, it knows that you want to execute some code after React is done rendering.

React do that by remembering a function we pass. In the example above, React remembers the function we passed in useEffect and will call it after render.

Let’s understand useEffect hook in the example above.

First we have declared a state variable named count and we’re telling React to use an effect. Then we are passing an arrow function to the useEffect Hook which is called an effect. Inside that function, we’re changing the document title. When React is done rendering, it runs the effect.

By default, useEffect runs after the first render as well as it runs after every time the DOM gets updated. Those are default settings but React also provides a way to customize that.

How does useEffect access the props?

JavaScript function scope and closures plays an important role here. Hooks uses JavaScript closures and use the props and variables that are in function scope.

That is the reason we keep useEffect inside the component so that it can access the props and variables inside the function.

React guarantees the DOM has been updated by the time it runs the effects.

Additional notes

  • We pass a different function to useEffect each time. That means each time we render, we run a different effect replacing the previous effect. It’s like each render has its own effect too.
  • React Lifecycle Methods like componentDidMount or componentDidUpdate block the browser when they are waiting for something. useEffect doesn’t do that as they happen asynchronously.
amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to define constants in PHP?PHPWhat happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousHow to make flexbox items of the same size?CSSHow to Use ROLLUP Operator in SQL and MySQL?SQL/MySQLHow to apply style to a specific child element using CSS?CSSSocial Media Colors: Sass VariablesMiscellaneous