How do I stop executing code inside the useEffect() hook when a React.js component renders for the f-CodePudding

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.

CodePudding user response：

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;

CodePudding user response：

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.