1

I have a useEffect that should be running at first render and a second useEffect that should be running only when state count changes, but both of them are running at first render. I use the useRef hook to track whether the component has mounted or not. It should start out as false and once the effect runs for the first time, it should change to true. The thing is that I get logged not first render even in the first render. I give my code:

const { useEffect, useRef, useState } = React;

const Component = () => {
    const [count, setCount] = useState();
    const isMounted = useRef(false);

    useEffect(() => {
        console.log("first render");
    }, []);

    useEffect(() => {
        if (isMounted.current) {
            console.log("not first render");
        } else {
            isMounted.current = true;
        }
    }, [count]);

    return (
        <div>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}
            >
                Click Me
            </button>
        </div>
    );
};

ReactDOM.createRoot(document.body).render(<Component />);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

If anyone could explain me why it is happening I would be very grateful. Thanks.

aronilie
  • 117
  • 6
  • I made you a runnable code snippet. The code you've provided doesn't reproduce the problem you're having. Can you please update it so it reproduces your problem by creating a [mre]? – Nick Parsons Dec 19 '22 at 09:24
  • Should you not use ref as `ref={isMounted}` to set it? Secondly, will `useEffect(() => {}, [])` not suffice for you? – Rajesh Dec 19 '22 at 09:25
  • 1
    You might also find this useful: [Make React useEffect hook not run on initial render](https://stackoverflow.com/a/57941438) (ie: creating your own hook) – Nick Parsons Dec 19 '22 at 09:29
  • @NickParsons I've tried that too and still not working. – aronilie Dec 19 '22 at 09:36
  • @aronilie are you using [react in strict mode](https://reactjs.org/docs/strict-mode.html)? – eroironico Dec 19 '22 at 09:39
  • @Nick I weren't, but I've wrapped my component in `` and still not working. – aronilie Dec 19 '22 at 09:43
  • @aronilie no, with react in strict mode components are rendered twice so i thought that was the cause – eroironico Dec 19 '22 at 09:45
  • 1
    @Nick nice! That was the problem, thanks a lot. – aronilie Dec 19 '22 at 09:48
  • @aronilie When I was creating your React snippet, I wrapped it in strict mode but didn't see the behavior you were mentioning. Surprised that the problem is related to strict mode as the behavior appears the same with or without it enabled in your code. – Nick Parsons Dec 19 '22 at 11:09
  • @NickParsons when I removed strict mode didn't rendered twice the component and worked the first mount function. – aronilie Dec 19 '22 at 11:17

0 Answers0