Hooks are a major part of modern React and for that I created a video series explaining the most important 10 React Hooks in details. Understanding these hook will really help you to level up your react game.
Below are the 10 major react hooks explained with examples.
Enjoy! ✌️
0. The Rules of Hooks
- Hooks should be called at a top level of a component. Do not call hooks inside conditions, loops or nested functions.
- Hooks are only usable in react
functional components
andcustom hooks
. Do not use hooks in class components.
1. useState
The useState hook
let's you add state variable to a component.
2. useEffect
The useEffect hook
is use to synchronize a component with an external system (also know as side effects). Good examples of side effects are, data fetching
, subscriptions/event listeners
and timer/intervals
.
3. useCallback
The useCallback hook
helps you to optimize functions between re-renders.
4. useMemo
The useMemo hook
is used in a similar way as the useCallback hook, only that useMemo is used to optimize values while useCallback is used to optimize functions.
5. useRef
The useRef hook
is used to create a reference to a value(or element). The ref
persists across renders and does not cause the component to re-render when its value changes.
6. useReducer
The useReducer hook
is an alternative to useState hook. It is often favored for more complex state management scenarios.
7. useContext
The useContext hook
is used to consume a context. Context in React is a way to pass data through the component tree without having to pass props manually at every level. useContext hook together with the react context are used to manage some form of global state, e.g a user/auth state.
8. useId
The useId hook
is used to generate unique IDs that can be passed to accessibility attributes.
9. use (new)
The use hook
lets you read the value of a resource like a Promise or context. This hook is unique because it does not follow all the rules of hooks. You can call it inside loops or even conditions like in if else
statements.
10. useTransition
The useTransition hook
lets you update the state without blocking the UI.
Top comments (2)
Honestly I would not recommend the usage of following hooks:
useState, useCallback, useMemo, useReducer, useContext, use (new)
Why? React is only a view library and is not meant to be used to manage state.
Using any of the build-in react state management hooks is only asking for trouble and countless footguns. Ask any experienced React developer if you do not believe me. There are much better library solutions out where to manage state using similar/identical hooks.
I wrote an entire Article about why and how
dev.to/adaptive-shield-matrix/reac...
I never had issues working with those hooks even in large applications, in my opinion I think only useEffect can get crazy and out of hand. Plus if you are an aspiring react developer, I think knowing these hooks are necessary. Many apps are already built with them and you'll have to understand those hooks in order to maintain/debug those apps.