React Hooks at a glance
React hooks allows us to use state and React lifecycle features without using class and React component lifecycle methods. Hooks introduced v16.8 and are Great. Have a look at few important hooks.
useState:
Stock Average Calculator
useReducer - simple usage:
0
useReducer - complex usage:
Below is the basic flow diagram of the useReducer Hook
Below is a todo list generator: It has toggle and remove funcationality built using the useReducer. Enter any todo in the text box
useEffect:
useEffect Hook called at every reder/ re-render. If we only want to run the useEffect hook only on specific variable state change then we must specify those variables in the dependecy array. Ex: useEffect is really cool when querying endpoints. In the initial query, we obviously need response. Later, if we are able to query the response with different paramters then its not needed to hit the API again.
**** We have return function in useEffect Hook which can be used to remove the listeners which we created previously to save app memory.
***** If we place a eventlistener in the useEffect which is called even without calling the useEffect.
useMemo:
useMemo Hook retuns Memorized value. That is, it caches the previous value if there are no changes in the given parameters.
Ex: When we queried some ID and we trying to query the same ID again then the useMemo hook won't run agian instead gives the previously cached result.
** Whenever if we want to update the object based on the referential equality in that case we can use useMemo hook.
In some cases, we are querying huge database or querying a heavy computational function, it takes a more time. In those cases, To improve efficency of the App, we can run that functionality inside useMemo hook and control it with the dependecy array.
The below example is just to demonstrate the performance of app with useMemo Hook. After caching the previous result.
useRef:
Refs are similar to State but unlike state Refs won't cause the component to Re-render. useRef returns an object like {current: default_value}
Refs are not only useful for accessing DOM elements but can also be used to persist values between renders without causing re-render.
In class components, we can use class variables to persist value between renders but In functional components, we need to use Refs, if we are not using State.
In General, Refs can also be used to reference the JSX elements. That is, the below input filed is attached to Ref when we click on the focus button the foucs will come to that input field without casuing Re-render the entire component. That is best use-case.
Warning: We should not use the useRef to update the values such updating the input field with a some value Since it won't update the state of that particular variable.
useContext:
Everything inside the Context Provider have access to the props of that Context. Even the childern of those components can also have access to the context props. This can be mostly useful in setting the theme of the app. Since theme needs to be updated to all the components from top level to all the way bottom.
In class components, It is needed to use the <TestContext.consumer></TestContext.consumer> to access the context props Whereas In functional components, It can be done using the useContext Hook.
We can get the props of the context directly from the useContext Hook. Ex: const isDarkTheme = useContext(TestContext);<TestContext.Provider>
<component1 />
<component2 />
<component3 />
</TestContext.Provider>
useCallback:
useCallback Hook is to stop Re-Creating an object during every render or re-render.
This looks similar to useEffect Hook but there is a difference : useEffect() runs after every render cycle (i.e. whenever our functional component re-runs/ re-renders), unless we pass a second argument to an array of dependencies of the effect whereas useCallback Hook prevents recreation of an object (function) in re-renders when there is no dependency array specified.