🐟 React Hooks tip #1— Tyler McGinnis (@tylermcginnis) October 29, 2018
Stop thinking in terms of the component lifecycle and start thinking in terms of "when should this effect be re-applied".
❌ "Fetch the data when the component mounts and then whenever the uid changes."
✅ "Fetch the data whenever the uid changes"
🐟 React Hooks tip #2— Tyler McGinnis (@tylermcginnis) October 29, 2018
Don't forget the second argument to "useEffect" which allows you to "skip" an effect if a value doesn't change.
ie. "Re-apply the effect only when selectedLanguage changes". pic.twitter.com/KgclL3KdoN
🐟 React Hooks tip #3— Tyler McGinnis (@tylermcginnis) October 29, 2018
Instead of adding a property to the component instance, ie "this.makeRequest = true", use the useRef hook.
Here the useRef hook is used to keep track of if React Router has changed routes. If it has, don't update the state. If it hasn't, update the state. pic.twitter.com/EXAXDfxz3l
🐟 React Hooks tip #4— Tyler McGinnis (@tylermcginnis) October 29, 2018
Dave's got this one. ⬇ https://t.co/qXVZWLIKpu
🐟 React Hooks tip #5— Tyler McGinnis (@tylermcginnis) October 29, 2018
Similar to the OG setState, you can pass a function to your "setX" updater function. If you do, when React invokes it, it'll pass it the latest state value.
You can use this pattern to avoid stale values that closures may cause. pic.twitter.com/ssYyV2Tknj
React Hooks: useState() and useEffect(), fetch Github API example
Hooks Todo App
Example app for this post: https://itnext.io/making-a-beautiful-todo-app-using-react-hooks-material-ui-52dacf3245f4
One new React Hook recipe every day
Collection of React hooks curated by the community