Today's post could be controversial since some people could say: "hey, this hook is not that important," but, you know, that is the beauty of the Internet; everyone can say their opinion.
So, these are some hooks every React developer should know and understand. (And if you are a beginner and reading this, don't worry; I added code examples to each one).
React Hooks were introduced in React 16.8 and quickly became essential for any React developer since they made creating maintainable and reusable components much more straightforward.
Today, I will talk about 10 essential ones to know!
💡 useState
The useState hook is the most basic hook in React, being used every time. As you probably already know, it adds a state to your functional components.
The way it works is it returns an array with two elements. The first element will be the current state, and the second is a function that updates the state.
Here you have a basic code example using it:
🔥 useEffect
The useEffect hook is used to perform side effects in your functional components. In other words, it is a function called when some variables change their value.
It has two arguments: the first is a function containing your side effects (what you want to do when those variables change), and the second is an array of the dependencies that we want to watch for changes (so React re-runs this effect).
Time for a code example:
🚀 useContext
The useContext hook is a more advanced hook (compared to the previous two). But it is essential to know it!
It makes it easy to consume context in your functional components. In other words, you can think of context as a way to share data between components without having to pass props down the component tree. So it would be like a state hook shared between components (but only for reading, not updating).
🕹 useReducer
The useReducer hook is used to manage your functional components' complex state and action logic. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.
The reducer function is just a function that returns the next state based on the current state and an action.
This is the most similar to the useState hook since it allows reading and writing the "state," but instead of a single state value, you can have an entire state object, which can be accessed anywhere in your application.
Don't worry if it sounds complex; with the following example, you will quickly understand it!
📄 useCallback
The useCallback hook is used to return a memorized callback function that only changes when one of its dependencies changes.
Usually, you use this when you have in your component a heavy function, so you don't want to re-run it in every re-render the component has, only when it is necessary (when the variables used by that function are changed).
As you know, it is useful for optimizing performance!
The way to use it is like this:
🛠️ useMemo
The useMemo hook is used to return a memoized value that only changes when one of its dependencies changes. It is similar to the useCallback hook but is for memoizing values instead of function returns.
Like the other hook, it is useful for optimizing performance since it avoids unnecessary calculations on every render.
A good basic example would be:
In the previous example, we are using the useMemo hook to avoid sorting the data array every time the component is rendered, improving the performance of the component.
📝 useRef
The useRef hook is used to access the value of a DOM element or a component instance in your functional components. It will return an object with a current property that you can use to access that DOM element.
In the previous example, we used the useRef hook to access the input element and set it as focused when clicking the button.
This hook is useful when we need a direct reference to an element (for example, here, getting the focus to the input element).
🔓 useImperativeHandle
The useImperativeHandle hook is less known, but it is useful. It is used to customize the instance value of a forwardRef component.
If you don't know what a forwardRef is, that would be another thing to learn, but I can not explain it in this article since it is out of the scope. But I would recommend you check this doc.
This hook helps expose some internal state or methods of a component to the parent component.
In the previous example, the useImperativeHandle hook is used to expose a custom interface, TextInputRef, to the parent component.
This interface has a single method, focuswhich can be used to set focus on the text input from the parent component.
The parent component could access this method through the ref prop passed to the TextInput component.
🔍 useDebugValue
The last one is another unknown one. The useDebugValue hook displays a custom label for your hook in the React Developer Tools. It takes as its first argument a value, and optionally it takes a formatted function as its second argument.
In this example, the useDebugValue hook provides a custom label for the count state variable in the React developer tools. That label will change depending on the value ofcount , to indicate if the count var is high or low.
As you can see, this can be really helpful in debugging since it provides more context about the state of your component.
We are at the end of the article, and as I promised, we have seen 9 hooks that I feel are important to know. These hooks make it easier to build and manage your React components, and since you can find them in any codebase, it is good to know!
🌎 Let's Connect!
- My Twitter: @thenaubit
- My Substack (here I will publish more in-depth articles)
Top comments (0)