Home / Tech / React Hooks

Tech

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

useState

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.

useEffect

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.

useContext

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

useReducer

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 };
    default:
      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.

useCallback

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.

useMemo

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.

useRef

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.

useImperativeHandle

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: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

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

useLayoutEffect

Runs synchronously after all DOM mutations.

import { useLayoutEffect } from 'react';

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

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

useDebugValue

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(() => {
    console.log(value);
  }, [value]);
}

// Usage
useLogger(someVariable);

Output: Logs someVariable to the console whenever it changes.

LISTEN