How do I stop executing code inside the useEffect() hook when a React.js component renders for the first time?

Question

I have a requirement not to execute the code inside useEffect() when the component renders for the first time. For that, I defined a variable outside of the component function and set it to true. And then I checked if the variable is true inside useEffect() hook and if it was true, I set the variable to false and set it to return as shown below. But the code is not working as I expected. The code inside useEffect() executes regardless.

import { useEffect, useState } from 'react';

let isInitial = true;

function App() {
  const [message, setMessage] = useState('First');

  useEffect(() => {
    if (isInitial) {
      isInitial = false;
      return;
    }
    setMessage('Executed');
  }, []);

  return <p>{message}</p>;
}

export default App;

I wanted to print 'First' inside the <p>. But the result was 'Executed' inside <p> which is not what I expected.

your code seems to be ok , I tried that in and it shows 'First' — Ali Sattarzadeh
– Ali Sattarzadeh, Commented Nov 13, 2022 at 6:43
@AliSattarzadeh for me, it shows "First" briefly and then it gets replaced with "Executed". I created this Codesandbox to demonstrate the issue I'm having — Chathura Kudahetti
– Chathura Kudahetti, Commented Nov 13, 2022 at 7:06
It is probably because you are in react strict mode and running react 18. Try removing <React.StrictMode> from your app file and it should work — julBayonna
– julBayonna, Commented Nov 13, 2022 at 7:09

Jae · Accepted Answer · 2022-11-13 07:16:38Z

1

Strict Mode would be the problem. It renders your component twice in development mode. So the result would be not what you need in your code.

In addition, I suggest you to change the let statement to useState. Changing mutable let in the useEffect would cause unexpectable side effects. Using useState would be more predictable, React way.

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

function App() {
  const [message, setMessage] = useState("First");
  const [isInitial, setIsInitial] = useState(true);

  useEffect(() => {
    if (isInitial) {
      setIsInitial(false);
    } else {
      // Do what you want excepts first render
    }
  }, [isInitial]);

  return <p>{message}</p>;
}

export default App;

answered Nov 13, 2022 at 7:16

Jae

5564 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chathura Kudahetti Over a year ago

Thank you @Jay. Yes, Strict mode was the issue. I will change let variable to a state inside the component.

mahooresorkh · Accepted Answer · 2022-11-13 07:26:01Z

1

The code you wrote should result <p>First</p>, unless <React.StrictMode> has wrapped around your main component (StrictMode is a tool for highlighting potential problems in an application and the checks are run in development mode only). It causes App component to render twice and useEffect callback function will be called twice too(although the useEffect has [] dependency).

You should remove that wrapper.

edited Nov 13, 2022 at 7:26

answered Nov 13, 2022 at 6:47

mahooresorkh

1,4552 gold badges11 silver badges18 bronze badges

1 Comment

Chathura Kudahetti Over a year ago

Thanks, @mahooresorkh. Yes, <React.StrictMode> was the issue. When I removed <React.StrictMode> wrapper, the code worked fine.

Collectives™ on Stack Overflow

How do I stop executing code inside the useEffect() hook when a React.js component renders for the first time?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related