5 React Hooks that you will use as a developer

Have you ever had trouble learning React hooks? I know, I have. There’s just so many hooks in React: useState, useEffect, useMemo, and the list goes on. Not only are there a million hooks, but some of them are hard to understand. That’s why I am creating this React Hook cheat sheet for you guys to reference when developing your next app. I will be covering 5 React hooks that you will use in your everyday life as a developer.

For those of you who are new to functional programming or came from developing class-based components in React apps, you might be wondering why do I need hooks. This little section below is just for you.

Hooks are functions that let us “hook into” state and lifecycle functionality in function components.

Hooks allow us to:

• reuse logic between components
• simplify and organize our code to separate concerns and not make our codebase messy
• avoid confusion with this
• avoid binding, class constructors, and a bunch of other useless junk

Now that you know why we need to use hooks, I will be talking about the five hooks that you will use in your everyday life.

1. useState

In simple words, useState allows you to create state variables in a functional component. If you don’t know what state is, state allows you to access and update certain values at any given time.

In even simpler words, useState is what you need to use when creating a variable that you might modify later.

Whenever you create a state variable, you need to provide it a default value (this can be any data type).

We can declare the state variable with const and when we use it in our code, we need to destructure it in order to use it in our code.

You can also update the state variable in case you ever need to change something.

To update the state variable, we need to pass the setter function the new value we want our state to be.

Whenever you declare your setter function, most of the time you prefix it with the word “set”

Another important thing to keep in mind is that you can use multiple useStates within one component.

You might be thinking when would I ever need to use more than one useState. View the example below.

If the new state of the variable depends on the previous one, we can access the previous state and apply changes.

For example, we could add 1 to the current yearsOld value to increment it.

You can also manage state with an object, this allows you to manage individual values as key-value pairs.

As the example below shows, when you are updating the state with an object, you need to spread in the previous state.

Now you might be wondering why we need to do that. The reason is when we don’t put the spread it will be overwriting the entire state and will remove what other state variables you put.

Let’s take the example below. In the useState, there’s a name and an age. If we don’t put the spread operator in the first function changeName then the state would lose the key age.

2. useEffect

The useEffect hook allows us to perform side effects in function components. Side effects are used when we need to fetch data from the API or when we need work with the dom.

Side effects are actions that can alter our component state in an unpredictable way.

useEffect accepts a callback function, which will run every time by default when the page reloads.

Another cool thing useEffect lets us do is we can conditionally perform effects with the dependencies array. This is the second argument that gets passed to a useEffect.

If any value changes, the useEffect gets run again. However, if no values are in the dependency array then the useEffect will only run once.

useEffect also lets you unsubscribe from listeners by returning a function at the end of the effect.

We would want to unsubscribe from events because when the component unmounts. If we don’t unsubscribe, React would try to update a state that no longer exists, causing an error.

3. useRef

Ref is a special attribute that is available on any React component. They allow us to create a reference to an element.

A useRef hook basically points to a certain element and gets the value from it. The most common application for a useRef hook is when dealing with forms.

4. useContext

useContext helps us avoid prop drilling, a React developer’s nightmare. Prop drilling makes your code messy fast and will give you trouble when developing the rest of the app

Context is helpful for passing props down many levels of child components from a parent component.

useContext gives us a simple function to access data we provided on the value prop of the Context Provider in any child component.

5. useReducer

The useReducer hook acts very similar to Redux. It has a reducer and actions that change the state in the reducer. The useReducer call returns the state property and a dispatch function

useReducer uses a reducer that isn't as strict as Redux's e.g. the second parameter passed to the reducer, action doesn't have to have a type property. This allows for manipulations such as renaming the second parameter.

What do I do now?

Now that you’ve learnt more about some useful hooks, implement them in your next project. Check out Sonny’s YouTube channel here.

You can also create some clones that I made on the channel. There will be many more builds to come to be on a lookout for those. If you want to take your skills to the next level, be sure to check out “Zero to Full Stack Hero” here.

Share this with anybody you think would benefit from this. If you have any suggestions, feel free to hit me up. If you like my content then don’t hesitate to buy me a coffee !

Thank You!

Srikar Kusumanchi
(PAPA Team Writer)