What are some built-in Hooks in React?

React Hooks - Interview Questions and Answers

React provides several built-in Hooks to manage state, lifecycle, and other side effects in functional components. Here are some of the most commonly used ones:

1. State Management Hooks

* `useState`

Manages local component state.
Returns a state variable and a function to update it.

Example :

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

2. Side Effects and Lifecycle Hooks

* `useEffect`

Handles side effects (e.g., fetching data, subscriptions, DOM updates).
Runs after the component renders.

Example :

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(interval); // Cleanup on unmount
  }, []); // Empty dependency array → runs once

  return <p>Timer: {seconds}s</p>;
}

3. Performance Optimization Hooks

* `useMemo`

Memoizes expensive calculations to avoid unnecessary re-computation.

Example :

import { useMemo, useState } from "react";

function ExpensiveCalculation({ num }) {
  const squaredNumber = useMemo(() => {
    console.log("Calculating...");
    return num * num;
  }, [num]);

  return <p>Squared: {squaredNumber}</p>;
}

* `useCallback`

Memoizes functions to prevent unnecessary re-renders.

Example :

import { useCallback, useState } from "react";

function ButtonComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

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

4. Reference and DOM Manipulation Hooks

* `useRef`

Stores a mutable reference that persists across renders.
Commonly used to reference DOM elements.

Example :

import { useRef, useEffect } from "react";

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

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

* `useImperativeHandle`

Customizes instance values exposed when using React.forwardRef.

Example :

import { useImperativeHandle, useRef, forwardRef } from "react";

const CustomInput = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

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

function Parent() {
  const inputRef = useRef();
  
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

5. Context and Reducer Hooks

* `useContext`

Consumes values from React’s Context API without using <Consumer>.

Example :

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemeComponent() {
  const theme = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

* `useReducer`

Alternative to useState, useful for complex state logic.

Example :

import { useReducer } from "react";

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();
  }
}

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

  return (
    <div>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}

6. Additional Hooks

* `useLayoutEffect`

Like useEffect, but runs synchronously after DOM mutations.

Example :

import { useLayoutEffect, useRef } from "react";

function LayoutEffectExample() {
  const divRef = useRef();

  useLayoutEffect(() => {
    divRef.current.style.color = "red";
  });

  return <div ref={divRef}>This text will be red immediately</div>;
}

* `useDebugValue`

Used for debugging custom Hooks.

Example :

import { useDebugValue, useState } from "react";

function useCustomHook(value) {
  useDebugValue(value > 5 ? "Large" : "Small");
  return useState(value);
}

Summary Table

Hook	Purpose
`useState`	Manages local state
`useEffect`	Handles side effects
`useMemo`	Memoizes expensive computations
`useCallback`	Memoizes functions
`useRef`	Creates mutable references
`useImperativeHandle`	Customizes `ref` exposure
`useContext`	Accesses Context API values
`useReducer`	Manages complex state logic
`useLayoutEffect`	Runs synchronously after render
`useDebugValue`	Adds debug info for custom hooks

1. State Management Hooks

* useState

Example :

2. Side Effects and Lifecycle Hooks

* useEffect

Example :

3. Performance Optimization Hooks

* useMemo

Example :

* useCallback

Example :

4. Reference and DOM Manipulation Hooks

* useRef

Example :

* useImperativeHandle

Example :

5. Context and Reducer Hooks

* useContext

Example :

* useReducer

Example :

6. Additional Hooks

* useLayoutEffect

Example :

* useDebugValue

Example :

Summary Table

* `useState`

* `useEffect`

* `useMemo`

* `useCallback`

* `useRef`

* `useImperativeHandle`

* `useContext`

* `useReducer`

* `useLayoutEffect`

* `useDebugValue`