Introduction

In this article, we will break down the six main hooks in React with the necessary illustrations. At the end of the article, you will have a basic understanding of what each hook does and why we use each hook.

What is React?

React is a JavaScript framework developed by Facebook in 2013. React is the most popular Javascript framework.

According to Statista, React is the most popular Javascript frontend framework. React has been used to create a lot of products we use daily, like Instagram, Uber Eats, Airbnb, Netflix, and many more.

React allows developers to easily create fast user interfaces for websites and applications alike. It efficiently updates and renders just the right components when your data changes.

What are "React hooks''?

To break it down in simple terms, React Hooks are JavaScript functions used to isolate the reusable part from a functional component. React Hooks can be stateful and also manage side effects.

A hook is a special function that lets you “hook into” React features.

Hooks were released in v16.8 and gave us access to all the features in class components but without so much boilerplate code.

It was a fresh breath of life for React that changed web development to this day.

Hooks are JavaScript functions, but there are two additional rules to bear in mind when using react hooks

• Hooks should not be called inside loops, conditions, or nested functions. Only call Hooks at the top level.

• Hooks should not be called from regular JavaScript functions. Only call Hooks from React function components.

useState() Hook

The useState() is a hook that lets you add React state to function components. useState() allows you to have state variables in functional components.

There are two types of components in React. One is class components, and the other is functional components.

Class components can have state and lifecycle methods. useState() encapsulates only a singular value from the state.

Why use useState() hooks ?

• In order to make your UI interactive, you need to be able to trigger changes to your underlying data model or component. This can be achieved with state in React.

• The useState hook gives you a clean, concise method to work with state.

useEffect() Hook

Often, you will need to perform tasks known as “side effects” in React. This includes Things like data fetching, subscriptions, or manually changing the DOM

These operations are called “side effects" because they are capable of affecting other components and can't be done during rendering.

Why use useEffect() hooks?

• The useEffect () hooks are executed after each render.

• React can skip an effect if certain values haven’t changed between re-renders. To do so, pass an “[ ]” as an optional 2nd argument

• useEffect () offers an optional cleanup function to unsubscribe any subscriptions and not introduce memory leaks.

useMemo() Hooks

Sometimes we don’t want a function to run every time a render, only when a certain value changes.

React useMemo() hooks returns a memorized value. You can think of memorizing as caching a value so it does not need to be calculated. It will only recompute the memorized value when one of the dependencies has changed.

Why useMemo() hooks?

• useMemo() hooks improve performance.

useCallback() hook

useCallback () works in the same way as useMemo (). The only difference is that it returns a memorized callback and not a memorized value

Why useCallback() hooks?

• useCallback() hooks improve performance.

useContext() hook

There are often times where multiple components need access to the same value. Using the useContext hook is the cleanest way to do this.

Context provides a set of values to all components consuming it

Why use useContext() hooks?

• useContext() hooks improve performance.

useReducer()

useReducer() offers another way to update. When you have intricate state logic including numerous sub-values or when the subsequent state depends on the preceding one, useReducer() should be used instead of useState().

Redux uses this for state management.

Conclusion

Now you have a basic understanding of the six main hooks in React and why they are used.