Basic Hooks: useState(): This functional component is used to set and retrieve the state. useEffect(): It enables for performing the side effects in the functional components. useContext(): It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.
Additional Hooks: useReducer() : It is used when there is a complex state logic that is having several sub-values or when the upcoming state is dependent on the previous state.
It will also enable you to optimization of component performance that will trigger deeper updates as it is permitted to pass the dispatch down instead of callbacks. useMemo() : This will be used for recomputing the memoized value when there is a change in one of the dependencies.
This optimization will help for avoiding expensive calculations on each render. useCallback() : This is useful while passing callbacks into the optimized child components and depends on the equality of reference for the prevention of unneeded renders. useImperativeHandle(): It will enable modifying the instance that will be passed with the ref object. useDebugValue(): It is used for displaying a label for custom hooks in React DevTools. useRef() : It will permit creating a reference to the DOM element directly within the functional component. useLayoutEffect(): It is used for the reading layout from the DOM and re-rendering synchronously.
Basic Hooks: useState(): This functional component is used to set and retrieve the state. useEffect(): It enables for performing the side effects in the functional components. useContext(): It is used...