Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to stop useEffect from running twice on mount or first render in React. The new React 18 strict mode runs useEffect twice and moved it further from production. Have they broken React? Possibly... this video provides a solution.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

Subscribe https://bit.ly/3nGHmNn

React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

Course Updates https://courses.davegray.codes/

Starter & Completed Source Code: https://github.com/gitdagray/useeffect_fix

How to stop useEffect from running twice

(00:00) Intro
(00:16) Welcome
(00:29) Semantic Versioning
(01:43) The new useEffect behavior
(04:41) Why did React do this?
(05:46) Fetching Data with useEffect
(07:49) useEffect fix variation #1
(10:02) useEffect fix variation #2

Corrections:
(11:04) Variation #2 needs - if (effectRan.current === true || process.env.NODE_ENV !== 'development') ..so it will also work in production without requiring you to change the code. Github source code updated.

Buy Me A Coffee: https://www.buymeacoffee.com/davegray

Tutorial References:
React beta docs - "You might not need an effect": https://beta.reactjs.org/learn/you-might-not-need-an-effect
React beta docs - "How to handle the Effect firing twice in development?": https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this React 18 useEffect tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #useeffect #twice