React 18, useEffect is getting called two times on mount

by

This behaviour is from React 18 itself when you are in development with Strict Mode. The core team is trying to implement this feature where we can preserve components’ state even after unmount. useEffect getting called twice is related to this feature. Here is an overview of what they say in the doc:

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state.

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component.

On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.

⚠️ This only applies to development mode, production behavior is unchanged.

However if you need to, for example in your case where you want the useEffect‘s callback to execute only when count changes, you can use a boolean ref using useRef to add some additional controls, like so:

import  { useState, useEffect, useRef } from "react";

const Counter = () => {
  const firstRenderRef = useRef(true);
  const [count, setCount] = useState(5);

  useEffect(() => {
    if(firstRenderRef.current){
      firstRenderRef.current = false;
      return;
    }
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount( count + 1 )}> click to increase </button>
    </div>
  );
};

export default Counter;

The above code will log only when count changes in production. And in development with Strict Mode, you would get one log on mount and not two as you had before because of that if statement.

More Related Contents:

  1. How to call loading function with React useEffect only once
  2. Using document.querySelector in React? Should I use refs instead? How?
  3. UseEffect being called multiple times
  4. React: “this” is undefined inside a component function
  5. State not updating when using React state hook within setInterval
  6. “this” is undefined inside map function Reactjs
  7. What are these three dots in React doing?
  8. React component initialize state from props
  9. Reactjs async rendering of components
  10. Calling setState in a loop only updates state 1 time
  11. How to make a shared state between two react components?
  12. React – Preventing Form Submission
  13. react useEffect comparing objects
  14. CSS pseudo elements in React
  15. Can’t build React/Next project – found page without a React Component as default export (context api file)
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. React eslint error missing in props validation
  18. When value is assigned to components state, why console.log prints the previous state?
  19. Why is my function being called twice in React?
  20. Matched leaf route at location “/” does not have an element
  21. Simulate a button click in Jest
  22. How to namespace es6 classes (for React components)
  23. Update single value in item array | react redux
  24. How to include local javascript on a Gatsby page?
  25. Trying to use React.DOM to set body styles
  26. Dynamically Rendering a React component
  27. How to have nested loops with map in JSX?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. How to programmatically fill input elements built with React?

Leave a Comment