Hooks were released this year on February 6, and some of you might have missed them, so this prezentation will get you up to speed.
What is a React Hook?
A Hook is a function provided by React, which lets you hook into React features from your functional component. This is exactly what we need to use functional components instead of classes.
Hooks will give you all React features without classes.
Hooks will make your code more maintainable, they will let you reuse stateful logic, and since you are reusing stateful logic, you will avoid the wrapper hull and the component reimplementation.
Actually, Hooks are backward comfortable, so you can update your React safely.
Hooks make React Great Again. You won't need MobX or Redux anymore.
So how to use a Hook? Check our examples in the meetup video!
https://www.youtube.com/watch?v=iIQPIlE9npo
Materials
You can check the code I used during my meetup talk:
https://github.com/RisingStack/react-hooks-meetup
You can download my prezentation here:
https://docs.google.com/presentation/d/17cirj5ZfLXk8f4Dh6yKnBVllNGKAy4k3h-PdloVJ14s/edit?usp=sharing
TLDW:
Try the following Hooks in functional React components:
useState
for local stateuseContext
for global stateuseEffect
for lifecyclesuseMemo
anduseCallback
for caching- create your custom Hooks using built-in Hooks (e.g.
useWindowWidth
,useDebounce
) - check other built-in Hooks at React docs
There are two very simple rules if you want to use hooks:
- Only call Hooks at the top level. Don't call Hooks inside loops, conditions or nested functions. This will preserve the state of the Hook between multiple states and
useEffect
. - The second rule of Hooks is only call Hooks from react functions. So, you can call Hooks on functional components, or from custom Hooks. This will ensure that all stateful logic in a component is clearly visible for its source code.