Different types of hooks in React and their uses.

 

In my last post, I gave a guide on how to to make our first React application. Now that you have created your first React application, it is time to know about the different kinds of hooks in React and when to use them.

Before, following this post, you must have a React app set up and must be inside the directory.

Different types of hooks and their use:- 

1. useState hook:- The useState hook is used to manage the state of a function component. It accepts an initial state and returns two values, namely, the current state and a function to update the state. 

In the given example count is the current state and setCount is the function to update the state. The useState hook can be used to store and update any type of data including primitive values, objects, and arrays.

const [count, setCount] = useState(0);

2. useEffect hook:- The useEffect hook is used to perform side effects, such as fetching data or setting up subscriptions. It accepts a function that contains the side effect logic and an optional array of dependencies. 

In the given example, the useEffect hook will fetch data when the component is first rendered. The empty dependency array ensures that the data is only fetched once. The useEffect hook can also be used to perform cleanup actions when the component is unmounted.

useEffect(() => {
  fetchData();
}, []); // Empty dependency array to prevent infinite loop

3. useContext hook:- The useContext hook us used to access the context object for a given context provider. It accepts a context object as its argument and returns the current context value. 

In the example, value will be the current value of the MyContext  context. The useContext hook can be used to access data from a context provider without passing props down through the component tree.

const value = useContext(MyContext);

4. useReducer hook:- The useReducer hook manages state using a reducer function. It accepts a reducer function and an initial state value and returns an array of the current state and a dispatch function.

In this example, state is the current state and dispatch is the function to update the state. The useReducer hook can be used to manage complex state that requires multiple actions or derived state values.

const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback hook:- The useCallback hook is used to create a memoized callback function. It accepts a callback function and an array of dependencies and returns a memoized version of the callback function. 

In the example, memoizedCallback will be a memoized version of the callback function. The useCallback hook can be used to prevent unnecessary re-renders of the child components that rely on the callback function.

const memoizedCallback = useCallback(() => {
  // Callback logic
}, [dependency]);

6. useMemo hook:- The useMemo hook is used to create a memoized value. It accepts a callback function and an array of dependencies and returns a memoized version of the value. 

In this example, memoizedValue will be a memoized version of the value returned by the function. The useMemo hook can be used to prevent unnecessaty re-computations of expensive values.

const memoizedValue = useMemo(() => {
  // Computation logic
}, [dependency]);

7. useRef hook:- This hook is used to create a mutable ref object that persists between renders. It accepts an initial value and returns a ref object. 

In this example, ref will be a ref object that persists between renders. The useRef hook can be used to access a DOM element directly or store values that need to persist between renders.

const ref = useRef();

8. useImperativcHandle hook:- This hook is used to expose an imperative method from a custom hook. It accepts a ref object and a function that returns the imperative method and returns the imperative method. 

In this example, imperativeHandle will be the imperative method that is exposed by the custom hook. The useImperativeHandle hook can be used to allow parent components to interact with the child components using a reference.

const imperativeHandle = useImperativeHandle(ref, () => ({
  // Imperative method logic
}));

9. useLayout hook:- The useLayoutEffect hook is used to perform side effects that should happen before the browser paints. It accepts a function that contains the side effect logic and an optional array of dependencies. 

In this example, the useLayoutEffect hook will perform the side effect logic before the browser paints. The empty dependency array ensures that the side effect logic is only performed once. The useLayoutEffect hook can be used to perform side effects that require the DOM to be in a certain state before they are executed.

useLayoutEffect(() => {
  // Side effect logic that should occur before painting
}, [ ]);

10. useDebugValue hook:- The useDebugValue hook us used to attach a custom label to a hookValue in the React Developer Tools. It accepts a value and returns nothing. 

In this example, the useDebugValue hook will attach the label "My Value" to the value in the React Developer Tools. The useDebugValue hook can be used to display helpful information about hook values during debugging.

useDebugValue(value);

That's all. Thank you for reading!