🎯 9 Essential React Hooks Every Developer Should Know
Tags: beginners, react, javascript, webdev
Published: 2023-01-30 14:33:41

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:

{% embed https://gist.github.com/NauCode/807a1084f759408640f5df2e8583fa18 %}


## 🔥 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:

{% embed https://gist.github.com/NauCode/8e76a9ab72a13f0bb95277a4c427826d %}


## 🚀 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*).

{% embed https://gist.github.com/NauCode/c0ff03605d29ba2b9abd49deb5a50e88 %}

## 🕹 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!

{% embed https://gist.github.com/NauCode/60679c24e05bcc44a039e0e9991982de %}


## 📄 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:

{% embed https://gist.github.com/NauCode/e7d541be71a35a52da5f8be05406e520 %}


## 🛠️ 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:

{% embed https://gist.github.com/NauCode/82c9851a976ea9f837029172e3ef1327 %}

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.

{% embed https://gist.github.com/NauCode/e906eb5d9bcadf73c3c0944628b3c7f0 %}

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](https://beta.reactjs.org/reference/react/forwardRef).

This hook **helps expose some internal state or methods of a component to the parent component**.

{% embed https://gist.github.com/NauCode/f05499fb8c5ee304ed31603868457ec0 %}

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, `focus`which 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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). It takes as its first argument a value, and optionally it takes a formatted function as its second argument.

{% embed https://gist.github.com/NauCode/1d5cad94cca75ef6e9da8e037fd3c019 %}

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 of`count` , 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](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I will publish more in-depth articles)