Reactjs useeffect function run twice

Question

I don’t get it, could someone please help me with this problem, why is my console.log in my "randomFunc" log out data twice when I visit “Hello” page/component? What is causing the console.log log out second time?

App.js

import { useState } from "react";
import { Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Hello from "./Hello";

export default function App() {
  const [data, setData] = useState();

  const randomFunc = (dataFromHelloComponent) => {
    setData(dataFromHelloComponent);
    console.log(dataFromHelloComponent); /* <====  When I click "Go to Hello!" Link, this line log out data twice!? */
  };

  return (
    <div className="App">
      <Link to="/hello">Go to Hello!</Link>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/hello"
          render={(props) => (
            <Hello {...props} randomFunc={randomFunc} data={data} />
          )}
        />
      </Switch>
    </div>
  );
}

Hello.js

import { useEffect } from "react";

export default function Hello({ randomFunc }) {
  useEffect(() => {
    randomFunc("Some random data!");
  }, [randomFunc]);

  return (
    <div className="hello">
      <h1>Hello World!</h1>
    </div>
  );
}

when I have “randomFunc” in Hello.js “useEffect” dependency, I get this in my browser console:

Some random data!

and if I remove “randomFunc” from Hello.js “useEffect” dependency, I get this in my browser console:

Some random data!

React warning: React Hook useEffect has a missing dependency: ‘randomFunc’. Either include it or remove the…

Kelvin Schoofs · Accepted Answer · 2021-07-30 16:44:20Z

1

You are recreating randomFunc every time App renders. Therefore the function is different, therefore useEffect(..., [randomFunc]) triggers again. You can wrap randomFunc using React.useCallback so it's always the same actual function object returned.

answered Jul 30, 2021 at 16:44

Kelvin Schoofs

8,7462 gold badges17 silver badges34 bronze badges

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

11 Comments

JustANewCoder Over a year ago

Is there something to do with the "setData()" code? cause I found out that if I remove the "setData()" code, I'll get only one "Some random data!" instead of two "Some random data!" in my console.

Kelvin Schoofs Over a year ago

Calling setData changes App's state, which triggers a re-render. Then you create a brand new randomFunc which you pass to Hello, causing a re-render there, where the useEffect notices randomFunc changed, causing the effect to retrigger. So yes, indirectly it's caused by setData, but anything causing App to re-render would trigger this bug.

JustANewCoder Over a year ago

So basically, if I am writing my code this way the only solution I can do to prevent data log out twice or trigger the bug you were talking about, is to use react's useCallback?

JustANewCoder Over a year ago

Hi, sorry just another quick question to the second comment, you said: "Calling setData changes App's state, which triggers a re-render. Then you create a brand new randomFunc which you pass to Hello, causing a re-render there, where the useEffect notices randomFunc changed, causing the effect to retrigger." but how come my code only logs out "Some random data!" twice and not causing an infinite loop? thanks and sorry again for asking another question after I accepted you answer.

Kelvin Schoofs Over a year ago

Correct. And again, memoizing (e.g. using useCallback on) randomFunc should fix it. Your randomFunc wouldn't change, therefore the effect would only ever trigger once. App would still re-render twice, since the effect does still run once and changes the state.

|

Collectives™ on Stack Overflow

Reactjs useeffect function run twice

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related