The Magnificent 7 Hooks of React

3 min readJun 23, 2021

Intro
As we know, React is an open-source JavaScript library for building user interface base on Components. React is used in the development of single-page or mobile applications. It is maintained by Facebook and a community of individual developers and companies.

Hooks

With the introduction of Hooks, functional components can add more functionalities like the use of state, lifecycle methods and better understand the written code. React comes with 7 Hooks that can help you in the development of components.

These 7 hooks are:

useEffect

Using this Hook, you tell React that your component needs to do something after render that can invoke a side effect. React will remember the function you passed (we’ll refer to it as our “effect”) and call it later after performing the DOM updates.

useEffect is good for:

Fetching data
Reading from local storage
Registering and deregistering event listeners

useState:

useState is a Hook that lets you add state to function component.The useState hook is a special function that takes the initial state as an argument and returns an array of two entries.

The first element is the initial state and the second one is a function that is used for updating the state.

useRef :

Is used to store data. But unlike useState which triggers an update(re-renders) whenever the state change.

useRef is good for:

· To access DOM elements.

· To persist values in successive renders.

· A data store just like useState.

· Easily exposes DOM elements (access them directly).

· Has single property called current.

· Used to store the previous state.

· Used to pass the data through the re-renders.

useContext:

useContext” hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level. Context defined will be available to all the child components without involving “prop

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

useMemo:

useMemo allows you to memoize(the result is “remembered” when the same parameters are passed-in subsequently) on a functions so that you can avoid calling them on every render. You pass in a function and an array of inputs, and useMemo will only recompute the memoized value when one of the inputs has changed.

useCallback:

useCallback is a React Hook which returns a memoized version of the callback function it is passed.This means that the function object returned from useCallback will be the same between re-renders.

Typically useCallback is helpful when passing callback props to highly optimised child components.

For example, if a child component that accepts a callback relies on a referential equality check (eg: React.memo() or shouldComponentUpdate) to prevent unnecessary re-renders when its props change, then it is important that any callback props do not change between renders.

useReducer

An alternative to useState. usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.