What Are the Hooks in React

React Hooks are functions that allow you to use state and other React features in functional components. Introduced in React 16.8, Hooks revolutionized the way developers build components by eliminating the need for class components while keeping components simpler and more readable.

Why we use hook in react ? 

Before Hooks, stateful logic was managed using class components. However, class components often led to complex code structures, making it harder to manage logic and reusability. Hooks solve these problems by enabling state and side effects in functional components, making React applications more maintainable and readable.

React commonly Used Hooks

1. useState

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. useEffect

The useEffect Hook is used for handling side effects, such as fetching data, subscriptions, and manual DOM manipulations.

import { useState, useEffect } from "react";

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

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

3. useContext

The useContext Hook allows components to consume values from a context without using the Consumer wrapper.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === "dark" ? "black" : "white" }}>Click Me</button>;
}

4. useReducer

The useReducer Hook is an alternative to useState for handling more complex state logic.

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:
      return state;
  }
}

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

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

5. useRef

The useRef Hook is useful for accessing DOM elements directly or persisting values across renders without triggering re-renders.

import { useRef } from "react";

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

6. useMemo

The useMemo Hook memoizes a computation to avoid unnecessary recalculations.

import { useMemo} from "react";

function ExpensiveCalculation({ num }) {
  const squared = useMemo(() => num * num, [num]);
  return <p>Squared: {squared}</p>;
}

7. useCallback

The useCallback Hook memoizes functions to prevent unnecessary re-creations.

import { useCallback} from "react";

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

8. useLayoutEffect

Runs synchronously after all DOM mutations.

9. useImperativeHandle

Allows customizing the instance value exposed when using ref.

10. useDebugValue

Used to display custom hooks debugging information.

11. useDeferredValue

Delays a state update to prevent blocking rendering.

12. useTransition

Manages transitions between states for better user experience.

13. useId

Generates unique IDs for accessibility and dynamic elements.

14. useSyncExternalStore

Subscribes to external data sources with consistent updates.

React Hooks make functional components more powerful by allowing state, side effects, and context handling without the need for class components. They promote cleaner, more reusable code and have become the standard for building modern React applications. If you have not already started using Hooks, now is the perfect time to dive in.