React - prevent calling useEffect for the first mount [duplicate]

Question

I want to prevent calling my useEffect on the first mount. how can I do this? I want the best practice. I don't want to use if condition

import { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(5); useEffect(() => { console.log(count); }, [count]); return ( <div> <h1> Counter </h1> <div> {count} </div> <button onClick={() => setCount(count + 1)}> click to increase </button> </div> ); }; export default Counter;

You can skip a render in useEffect only by using an if statement. Why don't you want to use it? — Amit
– Amit, Commented May 14, 2022 at 9:01

hossein fti · Accepted Answer · 2022-05-14 09:03:54Z

I found it. It should be handled by useLayoutEffect and useRef

import { useState, useEffect, useLayoutEffect, useRef } from "react"; const Counter = () => { const [count, setCount] = useState(5); const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log(count); }); return ( <div> <h1> Counter </h1> <div> {count} </div> <button onClick={() => setCount(count + 1)}> click to increase </button> </div> ); }; export default Counter;

Collectives™ on Stack Overflow

React - prevent calling useEffect for the first mount [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related