Every Built-in React Hook
React hooks API provides functionality for flow control, state management, and component lifecycle when using functional components.
Rules are simple:
You cannot call hooks from a regular JavaScript function.
You can call hooks only inside React function components or custom hooks
Hooks are functions that always starts with “use” word followed by a “superpower”.
There are several built-in React hooks and you can compose them into custom hooks for a specific use case in your application. In this article we will focus on the React built-in hooks, there are 3 basic hooks that are frequently used in regular applications and the other 7 additional hooks.
Basic hooks
- useState
- useEffect
- useContext
Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
1. useState
This is the most important and most used hook in react. We are using this hook in order to store the state and use it inside the component.
We call useState with one argument that represents the default value. It will return a stateful value and a function to update this value. We can simply use destructuring syntax to retrieve and name the value and the setter function. In the next example count is the stateful value and setCount is the setter function.
2. useEffect
The function you pass to useEffect as a parameter will run after the render is committed to the screen. Default behavior is to run after each render, but you also have the possibility to pass a second argument that is an array of dependencies. If you pass the dependencies array your function will run every time an item from array was changed.
You can use this hook to obtain similar results as componentDidMount, componentDidUpdate or componentWillUnmount in the context of React classes, the only difference is that useEffect is triggered during a deferred event.
Very often you need a cleanup function, a place to unsubscribe from all listeners.
The following example contains similar behavior with componentDidMount and componentWillUnmount
The Following example contains similar behavior with componentDidUpdate
3. useContext
This hook allows you to work with React Context API, a mechanism that allows you to share data between components using publish/subscribe model aka pub-sub model.
You will need to pass a context object as a parameter for this hook, it will return back the value of the nearest provider.
Creating a Context Provider
UserContext — The context object
UserProvider — A function component that renders its children inside the context provider provider.
Using Context Provider
At this point every child of UserProvider can use useContext hook with UserContext as a parameter.
You can use context value inside disconnected components, the important thing is to have the provider above in components hierarchy. You can have nested providers in the same component tree, each context consumer will retrieve the value from the nearest provider.
If you use Context Consumer in the past you’ve likely used the consumer component
The useContext hook is basically a cleaner replacement for Consumer component.
4. useReducer
This hook is used in advanced state management. It is an alternative to useState, and you can follow the Redux pattern with this special hook.
Instead of updating the state directly, you dispatch an action, that action will trigger a reducer function, and that reducer function computes and determine the next state. And finally, the state is passed down to UI components.
5. useCallback
When you define a function inside a react component, a new function object is created for every render of that component. In some cases, you want to memoize this function to prevent this behavior.
6. useMemo
This hook can help optimize computation cost.
Let’s say we have an expensive computation to make and we want to store that value between renders and recalculate on other value change events.
The expensiveComputation re-runs only when the count changes, in other re-renders of the component the computation value will be the result from the previous expensiveComputation call.
7. useRef
This hook helps to create a mutable object that will keep the same reference between renders. One thing to keep in mind is that mutable objects will not trigger a re-render on change.
- common use case for useRef is to access a DOM element imperatively
If you are trying to use refs to store data inside the component, you will notice that then component will not re-render when the count is changing.
8. useImperativeHandle
Rarely you will need this hook.
useImperativeHandle is to customize the value you want to expose using refs to the parent components.
9. useLayoutEffect
Another uncommon hook is useLayoutEffect which is similar to useEffect hook, the only difference is that it will run after rendering the component but before painting on the screen. That means react will wait for the function to finish before updating the screen to the client.
Basically, you will need to use this hook if you want to do something before the DOM is visually updated.
10. useDebugValue
This hook is used to debug custom hooks using react developer tools.
Using React Developer Tools we can see our debug values
