Hackforge Academy

Explanation

What is State in React?

Code:

State is a built-in object used to 
store dynamic data inside a component.

#white-Examples:
1.Counter value
2.Form input
3.API response
4.Toggle button status

Explanation

useState Hook
How it works: count → current state setCount() → updates state When state updates → component re-renders

Code:

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

Explanation

Handling Input Field

Code:

function FormExample() {
  const [name, setName] = useState("");
  return (
    <div>
      <input type="text" 
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <h3>Hello {name}</h3>
    </div>
  );
}

Explanation

Why State Management is Important?
Without state: UI will not update dynamically Hard to manage user interactions
With state: Dynamic UI Better control Predictable behavior

Code:

Explanation

Types of State Management in React 1.Local State (useState) 2.Lifting State Up (Sharing b/w Components) 3.useReducer (Complex State)

Code:

Explanation

Global State Management
Common tools: 1.Context API (built-in) 2.Redux 3.Zustand 4.Recoil

Code:

Explanation

Real-Time Example E-commerce cart Login user Dark mode toggle Notifications

Code: