React 18: useEffect Double Call; Mistake or Awesome?
Why Stack Overflow recommends it
Stack Overflow users link it when answering the common question of why useEffect fires twice (duplicate fetches, logs, or canvas elements) in React 18 development mode.
Recommended by 1 people across 1 different months, 2022 to 2022.
What it is
A roughly ten-minute React walkthrough by Jack Herrington on why React 18 Strict Mode runs useEffect twice in development. He builds a small example, shows the double call, argues it is a feature that exposes unreliable effects, and discusses the developer experience.
What people said
Recommends Bhavesh Daswani · 2022-07 · Stack Overflow · on “Print objects from array in react?”
For the issue related to printing twice in console, it might be related to Strict Mode, If you are using React 18 and have Strict mode on then in development mode it runs useEffect twice, in Production mode it will work normally that is single time. You can read the official documentation [LINK] and check out the [this video] which explain clearly why it was done so. For the Second question why not able to print list of articles, it is related to News.map here you are missing return statement <ul> {News.map((data) => { return <li key={data.title}>{data.title}</li>; })} </ul> Let me know does that helps.
Recommends Bhavesh Daswani · 2022-07 · Stack Overflow · on “ReactJS duplicate component when dispatch the redux action with useeffect”
Below Youtube video will help you understand the reason behind strict mode calling twice in development, if You have time then sure to checkout [this video]
Cites Steffen Frank · 2022-06 · Stack Overflow · on “Bug in React.js custom fetch hook”
I assume you use React in StrictMode [LINK] - this is the default for apps created with create-react-app. In strict mode, effects can fire twice [this video] while in development mode. You can verify that this causes your problem by running a production build. If the problem goes away, it is likely caused by StrictMode. My suggestion is to not change anything - actually, your code seems to work fine: the first effect execution triggers a fetch, then the second effect execution aborts the initial fetch and fetches for a second time. This is exactly, what the code is expected to do.
Cites Geanny · 2022-09 · Stack Overflow · on “How can I duplicate "upper-canvas" with FabricJS?”
The same thing happened to me with NextJS. What happens is that when the new version of React is in development mode the useEffects run twice. See here why they do it: [this video] . That's why running the same code twice duplicates it on canvas. Cheers