SYED IMAM
Syed Imam

Follow

Syed Imam

Follow
Wrap All React Hooks in 5 minutes.

Wrap All React Hooks in 5 minutes.

SYED IMAM's photo
SYED IMAM
ยทDec 28, 2022ยท

4 min read

HELLO, Gorgeous People on the internet. Today let's learn about all the core react hooks. In this article, we will be discussing each hook and its scenario where to use them. So without wasting further time let's get started.

Core React Hooks:

  • useState

  • useReducer

  • useEffect

  • useRef

  • useLayoutEffect

  • useImperativeHandle

  • useContext

  • useMemo

  • useCallback

useState:

useReducer:

useEffect:

  • It is somewhat similar to componentDidMount() lifecycle method present in React-Class-based components.

  • Scenario: It is mostly used in scenarios where you want to fetch data from the server and show the results on the page after the page loads successfully.

  • useEffect hook keeps track of the second argument and it re-renders the page whenever those values are changed. And without the second argument, your page will be re-rendered as many times your state changes.

  • Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/UseEffect

useRef:

useLayoutEffect:

useImperativeHandle:

  • Now, this is a very tricky hook we do rarely use this hook. Let's imagine a situation where you want to toggle the state of the child's component from the parent and do not want to toggle the state using props ( even sometimes your child component may be present deep down the tree structure) then you could use useImperativeHandle hook.

  • Scenario: Like bringing up the Snackbar or Popup modal box.

  • Code:https://github.com/machadop1407/react-hooks-course/tree/master/src/UseImperativeHandle

useContext:

  • useContext hook === Context API in Class-Based Component.

  • Scenario: when you have a list of components that want the same data and all those components need to update when the data get updated and you are tired of passing that data to the components one after the other and some components in the list do not need that data but you still need to pass the props becoz deep down child component need's it.

  • Then you can use useContext.

  • Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/UseContext

useMemo:

  • Now, this is an advanced hook but it optimizes the performance of the application.

  • Scenario: when you have a function that has computational code(medium logic that tears down data) present and you want that to run only the very first time and when the data related to the computational code changes. Then you can use useMemo hook and this function would be left idle at normal state changes.

  • Code:https://github.com/machadop1407/react-hooks-course/tree/master/src/UseMemo

useCallback:

  • This hook is similar to useMemo hook but here instead of running the computational code function when data changes we will be rendering a component when data is changed/updated.

  • Scenario: Let's say you have a child component inside the parent component and that parent function that returns data is passed to the child component as props and we expect the child component should re-render only when the data of the function changes.

  • But it doesn't happen like that every time the parent component state changes child component will always be re-render which is bad. This is every useCallback hook comes.

  • It will only re-render the child component only when the data returned from the function changes.

  • The difference between useMemo and useCallback is in useMemo will be storing the value of the function but in useCallback we are storing the whole function.

  • Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/UseCallback

Conclusion:

So these were the core react hooks that would be useful when you are writing functional components in React applications. In most cases, you would be using useState, useEffect, useContext hooks majorly. So try to do a Hand-on project using them. Let's meet in another article with some awesome content. Until then......

Arigato Guys.

Did you find this article valuable?

Support SYED IMAM by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this