React Build-in Hooks

React Build-in Hooks

Updated date: 2025-01-15

What is React Hooks

In React, a hook is a special function that lets you "hook into" React's features like state, lifecycle methods, and context in functional components. Hooks were introduced in React 16.8 and allow developers to use state and other React features without needing to write class components. You can either use the built-in Hooks or combine them to build your own.

Types of React Hooks

State Hook

useState

Manages state in a functional component.

import React, { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

useReducer

Manages complex state with a reducer function.

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

Context Hooks

useContext

Accesses context values without manually passing props down the component tree.

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

const ThemeButton = () => {
  const theme = useContext(ThemeContext);
  return <button>{theme === 'light' ? '🌞' : '🌜'}</button>;
};

const App = () => (
  <ThemeContext.Provider value="dark">
    <ThemeButton />
  </ThemeContext.Provider>
);

Ref Hooks

useRef

Maintains a mutable reference to a DOM element or value that doesn’t trigger re-renders when changed. The usecases are as follows:

useImperativeHandle

Effect Hooks

useEffect

The useEffect hook in React is used to manage side effects in functional components. Side effects include actions that affect something outside the component. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

useLayoutEffect

This hook fires before the browser repaints the screen. You can measure layout here. This makes it useful for operations where you need to measure the DOM, make immediate changes, or ensure consistency between rendered content and layout.

Here is the use cases

useInsertionEffect

The useInsertionEffect hook in React is a specialized hook introduced in React 18. It is used to insert styles or other resources synchronously into the DOM before any DOM mutations are made. This ensures that styles are applied immediately, avoiding layout inconsistencies or visual flickering

Performance Hooks

useMemo

Memoizes a computed value to optimize performance by avoiding expensive recalculations.

import React, { useState, useMemo } from 'react';

const ExpensiveCalculation = ({ count }) => {
  console.log('Calculating...');
  return count * 2;
};

const App = () => {
  const [count, setCount] = useState(0);
  const memoizedValue = useMemo(() => ExpensiveCalculation({ count }), [count]);

  return (
    <div>
      <p>Result: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

useCallback

Memoizes a callback function to prevent unnecessary re-creations.

import React, { useState, useCallback } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Rendering Child');
  return <button onClick={onClick}>Click Me</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
};

useTransition

This hook lets you mark a state transition as non-blocking and allow other updates to interrupt it.

The use cases are as follows

useDeferredValue

This hook lets you defer updating a non-critical part of the UI and let other parts update first.

The difference between useDeferredValue and useTransition is as follows

ScenariouseDeferredValueuseTransition
Filtering Large ListsUse when the filtering depends on a single value.Use when the filtering involves multiple state changes or expensive updates.
Navigating Between ViewsNot suitable.Best choice for deferring navigation state updates.
Autocomplete SearchUse for deferring the search input value.Use for managing broader transitions, like updating suggestions and UI.
Rendering Expensive ComponentsUse to defer updates to specific props or values.Use to defer the entire state update that triggers rendering.

Other Hooks

useDebugValue

The useDebugValue hook in React is primarily a developer tool designed to improve debugging for custom hooks. It allows you to display custom labels or values in React DevTools, providing insight into what’s happening inside a custom hook.

import React, { useState, useDebugValue } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  // Add a debug label for this hook
  useDebugValue(count > 10 ? 'High Count' : 'Low Count');

  return [count, setCount];
};

const Counter = () => {
  const [count, setCount] = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

useId

The useId hook in React is used to generate unique IDs that are consistent across server-side rendering (SSR) and client-side rendering (CSR). It ensures that elements requiring unique identifiers (e.g., form inputs, labels, or ARIA attributes) do not cause mismatches or duplication between SSR and CSR. Typically used with accessibility APIs.

import React, { useId } from 'react';

const FormField = () => {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
};

export default FormField;

useSyncExternalStore

The useSyncExternalStore hook in React is a low-level utility introduced in React 18 to subscribe to external stores and manage their state within a React component. It ensures consistent updates and prevents mismatches between server-side rendering (SSR) and client-side rendering (CSR).

This hook is particularly useful for integrating with state management libraries like Redux, Zustand, or any custom external store that isn't directly tied to React's state system.

useActionState

This hook allows you to manage state of actions.