The Magnificent 7 Hooks of React

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.

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.

  • 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.

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.

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

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store