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:
Scenario: When you want to render the page on the bases of one specific state change then we can use useState hook.
Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/UseState
useReducer:
useReducer hook is an alternative or replacement to the useState hook.
Scenario: The benefit of useReducer hook over useState is instead of using 2 useStates to update the state values in one place we can replace that with useReducer hook that would render the page only once instead of 2 times.
Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/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:
useRef hook helps us to easily manipulate the DOM element.
Scenario: Instead of using the "
document.getElementById" blaa blaa we can easily manipulate the DOM elements using this Hook. As react has virtual Dom useRef hook makes use of it instead of the Real Dom.Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/UseRef
useLayoutEffect:
The difference between useEffect and useLayoutEffect is useLayoutEffect is called before the useEffect. It is fundamentally called at the earlier stage of page rendering.
Scenario: It is mostly used in scenarios where you want to show the initial UI or values before the useEffect does its job.
Code: https://github.com/machadop1407/react-hooks-course/tree/master/src/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......