Step By Step Integration Of React Hooks — useState, useEffect, useRef, useMemo, useCallback
Hello Developers, All of you know about functional components. Today we will go to the next level in functional components and see in detail how React Hooks allow us to implement variables, functions, and managing states in functional components. Top 5 React Hooks — useState, useEffect, useRef, useMemo, useCallback. We will see each in detail and see how we develop a powerful React app by using Hooks.
React Hooks -
- useState
- useEffect
- useRef
- useMemo
- useCallback
useState —
useState hooks allow you to create, update state variables in functional components. Here, we will take two state variables with different data types — Numeric, String and Object and see how it will work.
You see, it’s very simple, here we take the numVal (Numeric) state variable with initial value of 95. Same way I have created strVal (String) state variable with initial value of KPITENG. And objVal (Object) state variable with initial value num (95), str (KPITENG).
Now, Let’s see usage in functional components. Let’s create a TextInput component and assign numeric value from state.
Same way here, we created another TextInput and assigned string value from state.
This seems good, Till we have used the State variable, Now, let’s try to update the state variable. Let’s add TextInput onChangeText event and update state Variable.
You see, it’s very simple to update the State variable. Now if you want to see values which you have updated in State, then let’s read values from State and render in Text Component.
Related Article — Top 10 React Hooks
useEffect —
useEffect hooks allow developers to take action on a certain stage of component life cycle and event occured, like First Time Render, Component Update, State Variable || Props Update etc. Let’s see step by step.
Here, we have created useEffect hooks with empty braces [], which means it is called only when component load. This is similar to componentDidMount integration
But, if you want to call useEffect when numVal (state variable) gets updated. Then, simply add [numValue] in useEffect.
This seems perfect, But with this integration useEffect call with two reasons, Initial Component Load and While any changes in state variable in numVal. But, I want to call useEffect only when numVal changed not on Component Load, then,
Here, I have added another Hooks useIsMount, which helps to identify that component loaded first time and it’s called second time (due to state variable changes). So I have added the condition if isMount — true which means component load first time. If isMount false — which means it’s getting called due to state variable changes.
This is code for useIsMount hooks:
useRef —
useRef hooks returns a mutable ref object. The value will persist for the full lifetime of the component.
Let’s take one example and understand real-time use of useRef. We already have TextInput, now what we will do, we will add one Button (TouchableOpacity) on press of it, we will focus TextInput so the user can directly type it. Let’s do code,
See, full code integration for useRef
useMemo —
useMemo hooks helps developers to avoid re-rendering of child components to improve the performance of react application.
Let’s take an example,
Here, We have created an array to render in FlatList. Let’s see Code of FlatListItem
Seems, all good, you can see FlatList rendered Perfectly. But What happens if you have Switch in FlatListItem — onChange of it — you want update status to true/false in arrTechnology then, Then It will re-render all FlatListItems instead of updating/ rendering specific FlatListItem. Which causes performance issues. Think of having 50+ records then each time it will render 50+ FlatListItem. Here, useMemo helps use — useMemo helps to avoid re-rendering by memoizing the value of state variable/ props variable. Let’s see integration
Here, We have wrapped render into useMemo — and tell useMemo to re-render components only when item.status is changed after initial render.
Let’s see full source code -
useCallback —
useCallback — helps developers to memorize the action — instead of creating separate functions on each render.
In the previous example, we have used onChangeSwitch action, What happens when component render it will render onChangeSwitch, if you have more records in FlatList — due to change component re-render then each time onChangeSwitch instance gets created. To avoid this creation I will use useCallback which will memoize the action.
You see, we have only returned the useCallBack action — which means this action will create only one time only.
Thanks for reading the article step by step, now you have a detailed idea on how to create a state variable, how to integrate Hooks into a functional component.
Thanks for reading Article! || Read More Technical Articles
KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com || hello@kpiteng.com
