React Hooks Cheatsheet — Most commonly used hooks in ReactJS

Hi everyone, so in this article we are going to discuss React Hooks Cheatsheet. Before jumping to more details, we need to understand what is hooks, and their purpose.

Hooks basically are the methods that can be reusable from the functional component anywhere in the application to avoid redundancy of the code. Hooks can be stateful and can manage side effects. So, we can now isolate all the stateful logic in hooks and use it in the components.

You have to remember that each hook serves a specific purpose, and understanding when and how to use them effectively can greatly improve your React development experience.

Here’s a React Hooks cheatsheet that provides a bunch of standard in-built hooks — let’s understand with examples following below:

Learn more: How to start and setup the ReactJS project? — A full Beginner guide

Table of Contents

1. useState
2. useEffect
3. useContext
4. useReducer
5. useCallback
6. useMemo
7. useRef
8. useImperativeHandle

useState

1. useState is a hook that allows functional components to have a state.
2. It returns a stateful value (state) and a function (setState) to update it.
3. The initial state can be passed as an argument to useState.

import React, { useState } from 'react';

const Component = () => {
  const [state, setState] = useState(initialState);
};

useEffect

1. useEffect is a hook that runs side effects in functional components.
2. It takes a function as its first argument, which will be executed after rendering.
3. The second argument is an optional array of dependencies, which determines when the effect should be re-run.
4. If the dependencies array is empty, the effect only runs once after the initial render.
5. If the effect returns a cleanup function, it will be executed when the component unmounts or when the dependencies change (cleanup phase).

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    // Code to run after component renders or when dependencies change

    return () => {
      // Code to run when component unmounts or when dependencies change
    };
  }, [dependencies]);
};

useContext

1. useContext is a hook that allows functional components to consume values from a Context.
2. It takes a Context object created using React.createContext() as its argument.
3. It returns the current value of the Context within the component’s hierarchy.

import React, { useContext } from 'react';

const MyContext = React.createContext();

const Component = () => {
  const value = useContext(MyContext);
};

useReducer

1. useReducer is a hook to manage the state in a more complex way than useState.
2. It takes a reducer function and the initial state as arguments and returns the current state and a dispatch function to update it.
3. The reducer function receives the current state and an action, and it returns the new state based on the action type.
4. This hook is useful when state logic is more involved, like handling multiple related state changes in one place.

import React, { useReducer } from 'react';

const initialState = { /* initial state */ };

const reducer = (state, action) => {
  switch (action.type) {
    case 'ACTION_TYPE':
      return { /* updated state */ };
    default:
      return state;
  }
};

const Component = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
};

useCallback

1. useCallback is a hook that returns a memoized version of the function.
2. It helps prevent unnecessary re-renders of child components that receive this function as a prop.
3. The memoized function will only execute when one of the dependencies in the dependencies array changes.

import React, { useCallback } from 'react';

const Component = () => {
  const memoizedCallback = useCallback(
    () => {
      // Function to memoize
    },
    [dependencies],
  );
};

useMemo

1. useMemo is a hook that returns a memoized value.
2. It helps prevent unnecessary re-computation of expensive calculations within a component.
3. The memoized value will only change when one of the dependencies in the dependencies array changes.

import React, { useMemo } from 'react';

const Component = () => {
  const memoizedValue = useMemo(
    () => {
      // Value to memoize
    },
    [dependencies],
  );
};

useRef

1. useRef is a hook that returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).
2. The ref object persists between renders and does not cause a re-render when its .current property changes.
3. It can be used to store references to DOM elements, previous states, or any mutable value.

import React, { useRef } from 'react';

const Component = () => {
  const refContainer = useRef(initialValue);
};

useImperativeHandle

1. useImperativeHandle is a hook that allows a child component to pass its imperative handle to a parent component.
2. It is used with the forwardRef function to enable the parent component to access functions or values of the child component.
3. The first argument of useImperativeHandle is the ref object obtained from the forwardRef, and the second argument is a function that returns an object with exposed properties.

import React, { useImperativeHandle, forwardRef } from 'react';

const Component = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // Expose functions or values to parent component
  }));
};

So, these all are the most commonly used hooks, play with these powerful react hooks cheatsheet for building modern, efficient, and maintainable applications. Do practice a lot!

I hope you enjoyed the article and if you found this useful, then please share it with your friends and colleagues.

Checkout here for more tech articles SidTechTalks.

Happy Coding!