You're Doing React Hooks Wrong, Probably

Let's see how to get the most our of React hooks by using them as a reactive state management system by making proper use of the dependency arrays with useEffect, useMemo and useCallback. Github: ​https://github.com/jherr/reactive-pokemon/tree/main/src Codesandbox: ttps://codesandbox.io/s/github/jherr/reactive-pokemon/tree/main/?file=/src/App.tsx Completed code: https://github.com/jherr/reactive-pokemon/blob/completed/src/App.tsx Spreadsheet: https://docs.google.com/spreadsheets/d/1M61z9NC0vNemzk1Nc34Xi_1F3PeNVMwJfdOh1khznUo Kent C. Dobbs Article: https://kentcdodds.com/blog/usememo-and-usecallback 00:00 Introduction 02:20 Project setup 03:45 Getting the data 05:18 Creating derived data the wrong way 08:03 Tracking re-renders 09:05 How React.memo works 10:24 Using useMemo 11:55 Dependency graphs in React 14:54 Adding search 17:03 Diagramming the data flow 19:05 Tips for getting it right 19:58 Outroduction If you liked this video, buy me a coffee! https://www.buymeacoffee.com/bluecollarcoder Typescript Playground: https://www.typescriptlang.org/play Types vs Interfaces: * https://blog.logrocket.com/types-vs-interfaces-in-typescript/ * https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces 👉 What's my theme? Night Wolf [dark blue] 👉 What's that font? MonoLisa 👉 Jack is also on the React Round Up podcast: https://devchat.tv/podcasts/react-round-up/ 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 💢 Watch our other videos: 💟 Hacking your Github contribution graph: https://youtu.be/_ZQSPYDlk3U 💟 More Typescript videos: https://www.youtube.com/playlist?list=PLNqp92_EXZBIKO8lqN3089jgZUi-FUFXX Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel. #typescript #react #reactive