React Hooks cheat sheet

React Hooks cheat sheet. Explore our ultimate quick reference for React Hooks.

This React Hooks Cheat Sheet provides a detailed overview of essential hooks in React, complete with concise descriptions and practical examples. It covers basic hooks like useState and useEffect, as well as additional and custom hooks, helping developers enhance their functional components. Ideal for both beginners and experienced developers, this guide simplifies state management and side effects in React applications.

Basic Hooks


Allows you to add state to a functional component.

import { useState } from 'react';

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

Output: A state variable count initialized to 0 and a function setCount to update it.


Runs side effects in functional components.

import { useEffect } from 'react';

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

Output: Updates the document title whenever count changes.


Accepts a context object and returns the current context value.

import { useContext } from 'react';
import { ThemeContext } from './theme-context';

const theme = useContext(ThemeContext);

Output: The current value of ThemeContext.

Additional Hooks


An alternative to useState for complex state logic.

import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
      throw new Error();

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

Output: A state object managed by the reducer function and a dispatch function to send actions.


Returns a memoized callback function.

import { useCallback } from 'react';

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Output: A memoized version of doSomething that only changes if a or b change.


Returns a memoized value.

import { useMemo } from 'react';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Output: A memoized result of computeExpensiveValue that only recomputes when a or b change.


Returns a mutable ref object.

import { useRef } from 'react';

const myRef = useRef(null);

Output: A ref object that persists for the lifetime of the component.


Customizes the instance value that is exposed to parent components when using ref.

import { useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {

  return <input ref={inputRef} />;

Output: A FancyInput component that exposes a focus method to its parent component.


Runs synchronously after all DOM mutations.

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  // DOM mutations
}, []);

Output: Executes the effect immediately after the DOM has been updated.


Displays a label in React DevTools for custom hooks.

import { useDebugValue } from 'react';

useDebugValue(isOnline ? 'Online' : 'Offline');

Output: "Online" or "Offline" displayed in React DevTools.

Custom Hooks

Custom Hook Example

A custom hook that logs the value of a variable.

import { useEffect } from 'react';

function useLogger(value) {
  useEffect(() => {
  }, [value]);

// Usage

Output: Logs someVariable to the console whenever it changes.