In React, State is a built-in JavaScript object used to store data or information about a component that can change over time.

Whenever a component's state changes, React automatically re-evaluates the component function and re-renders the user interface to reflect the new state in the DOM.

Analogy:

Think of a component's State like a digital scoreboard in a football match. When a team scores a goal, the scoreboard (state) changes, and the stadium screen (UI) instantly updates to display the new score.

Understanding the difference between State and Props is fundamental to mastering React:

React provides the useState hook function to declare state in functional components.

Import & Syntax:

import { useState } from 'react';

const [stateVariable, setStateFunction] = useState(initialValue);

Breakdown of Array Destructuring:

1. stateVariable: Holds the current snapshot of the state value.
2. setStateFunction: A function used to update the state variable and schedule a component re-render.
3. initialValue: The starting value of the state when the component first mounts.

When you invoke a state setter function (e.g., setCount(5)), React performs 3 steps under the hood:

1. State Update Queue: React schedules a state change with the new value.
2. Component Function Execution: React re-runs (calls) your component function with the updated state value.
3. Virtual DOM Diffing & DOM Reconciliation: React compares the newly generated Virtual DOM tree with the previous Virtual DOM tree and updates *only* the specific DOM nodes that changed in the real browser DOM!

You can declare multiple independent state variables inside a single component:

function UserProfile() {
  const [name, setName] = useState("Ravindra Nath Jha");
  const [age, setAge] = useState(25);
  const [isOnline, setIsOnline] = useState(true);

  return (
    <div>
      <h2>{name} ({age} yrs)</h2>
      <p>Status: {isOnline ? "Active 🟢" : "Away 🔴"}</p>
    </div>
  );
}

If calculating your initial state involves an expensive operation (e.g. reading from localStorage or parsing large JSON files), pass a callback function to useState:

// ❌ WRONG: Runs expensive function on EVERY render!
const [data, setData] = useState(getExpensiveData());

// ✅ CORRECT: Runs callback ONLY once when component first mounts!
const [data, setData] = useState(() => getExpensiveData());

1. Mutating State Directly: Writing count = 5 or state.name = "John". React will NOT re-render the UI because setter functions were not called!
2. Calling useState inside loops or conditions: Hooks MUST always be called at the top level of your component function.
3. Reading State Immediately After Setting It: State updates are asynchronous; reading state on the very next line will log the *old* state value.

Q1: What is State in React and why do we need it?

*Answer*: State is a mutable data store managed inside a component. When state updates via setter functions, React automatically triggers a component re-render to reflect new data in the UI.

Q2: What is the difference between State and Props?

*Answer*: Props are immutable data passed down from a parent component, while State is mutable data created and managed locally within a component.

Q3: What happens if you mutate state directly without calling the setter function?

*Answer*: Direct mutations change the variable in memory, but React remains unaware of the change. Consequently, no re-render occurs, and the UI becomes out-of-sync.

Here is a complete interactive component managing numeric counters, step controls, and theme toggle states: