Hooks are functions that provide React features to function components. They always start with the use keyword. We can use either built-in hooks provided by React or create our own custom hooks.

eg:- useState,useEffect etc...

React Hooks can be categorized based on the problems they solve.
Below are some commonly used hook categories that are very useful in real-world projects:

• (i).For State Management

• (ii).For Handling Side Effects

• (iii).For DOM Manipulation

• (iv).For Handling Global State

• (v).For Handling Lifecycle Events

State is simply the current snapshot of a component. It allows a component to remember information and use it later.

For example, the email or phone number of the current user can be stored in state so that the component can access and use it whenever needed.

State helps components become dynamic and interactive.

State Management Hooks in React.

To manage state in React, we mainly use two hooks:

• (1). useState
• (2). useReducer

1. useState Hook

useState is a React Hook that allows us to add a state variable to a functional component.

Syntax

const [name, setName] = useState(initialValue);

How useState Works

The useState returns an array with two elements

• (i) The current state value
• (ii) The setter function used to update the state

when the setter function is called React

• (i) Updates the state
• (ii) trigers re-render with the updated state

// eg:

 const [email, setEmail] = useState("")

2. useReducer Hook

useReducer is another React Hook used for state management.

It is especially useful when:

- (1) State logic is complex
- (2) Multiple state values are related
- (3) State updates depend on previous state

This hook allows us to use a reducer function inside a component.

What is a Reducer?

• A reducer is a function that defines how the state should be updated based on an action.

In simple words

• Reducer ek function hota hai jisme hum batate hain ki state kaise update hogi.

// syntax

function reducer(state, action) {
  // logic to update state
  return newState;
}
const[state,dispatch]=useReducer(reducer,initialState);

How useReducer Works

The useReducer hook returns an array with two values:

• (i). The current state
• (ii). A dispatch function

dispatch Function?

• dispatch is a function used to send an action object to the reducer.

Reducer Function Details

The reducer function always takes two arguments:

• (i). state –> the current state
• (ii). action –> an object that describes what should happen

The reducer must always return a new updated state and should never modify the existing state directly.

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
}

Summary

• State allows components to remember data useState is best for simple state values useReducer is best for complex state logic. Both hooks help manage state and trigger re-renders efficiently

Handling side effects means doing tasks like fetching data, setting up subscriptions, or manually manipulating the DOM inside a component.

To handle side effects in React, we use the useEffect hook.

useEffect Hook

useEffect is a React hook that helps us handle side effects in a component. It allows us to run certain code after the component renders.

Basically, after using this hook, you are telling React: “Bhai, component render hone ke baad ye particular code chala dena.”

useEffect Takes Two Things

1. A function
2. An optional dependency array

The function passed to useEffect runs: after the component renders, or after a state/value changes (if specified in the dependency list).

Variations of useEffect

there are three common variations of the useEffect hook:

Without Dependency Array

useEffect(fn)

The function (fn) runs:

1. once on the initial render
2. and after every state change inside the component

With Empty Dependency Array

useEffect(fn, []);

The function runs:

1. only once after the initial render

This is commonly used for:

1. API calls
2. setting up subscriptions
3. one-time logic

With Dependency Array

useEffect(fn, [name])

The function runs:

1. on the initial render
2. every time name (state or prop) changes

Common Use Case

A very common use case of useEffect is fetching data from a backend or API after the component renders and then hydrating the component with the fetched data.