useEffect and useLayoutEffect | React Hooks | React.js Tutorial #6

In this video we'll learn you how and when to use useEffect and/or useLayoutEffect in React. We will also learn about side-effects. We will compare useEffect and useLayoutEffect using a timeline diagram to understand when both run. ---- React.js Tutorial Playlist: https://www.youtube.com/playlist?list=PLYSZyzpwBEWSe71-aLlq71B2LPZzTNO8a ---- ---- SWR Video: https://youtu.be/a7JigiLw_OY ---- ---- GitHub Repository: https://github.com/bmvantunes/youtube-2020-oct-react-hooks-useeffect GitHub Commit history: https://github.com/bmvantunes/youtube-2020-oct-react-hooks-useeffect/commits/main ---- Relevant Links for this video: ---- json2ts: http://json2ts.com/ SWR Documentation: https://swr.vercel.app/ React.js useEffect Documentation: https://reactjs.org/docs/hooks-effect.html React.js Hooks Reference Docs: https://reactjs.org/docs/hooks-reference.html#useeffect ---- Timeline: 00:00 Introduction 00:23 What is a side effect? 02:23 Example from React Documentation 02:45 What are our intentions when coding? 03:25 useEffect and useLayoutEffect timeline 08:00 Code example using setTimeout 16:14 Example with HTTP calls (using fetch) 20:20 Homework description 21:20 SWR Recomendation 21:40 Conclusion #ReactJS #Hooks #ReactHooks #useEffect ---- Follow me on: Twitter: https://twitter.com/bmvantunes Dev.to: https://dev.to/bmvantunes Website: https://brunoantunes.net Github: https://github.com/bmvantunes LinkedIn: https://www.linkedin.com/in/bmvantunes