State in React

Sometimes, a component needs to manage its own data. For example, when you click a button, it might update some information specific to that component. This is where state comes in; State is local data that a component controls.

Stateful vs. Stateless Components:

Stateful Components: Have their own internal state (data that changes over time).
Stateless Components: Do not manage their own state and only receive data via props.

State vs. Props:

State → Data owned and controlled by the component.
Props → Data passed from a parent component (read-only for the child).

The Problem: Sharing State
React follows a top-down data flow, meaning data moves from parent to child via props.
However, sometimes a child component’s state needs to be shared with a parent or sibling.
But React components return JSX, not raw data, so how do we lift state out of a component?

1.Lift State to a Common Parent (Using Hooks):
"Lifting state" means you move the state management to the nearest common parent of the components that need to share the state. The parent component holds the state and passes it down to its child components as "props" . This way, child components can modify the state via functions passed down by the parent.

function Parent() {
  const [count, setCount] = useState(0);  // state is managed here

  return <Child count={count} setCount={setCount} />;  // passing state and setter to child
}

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

_!!Becomes harder to manage when you need to pass state through many layers (prop drilling).
_

2.Use Context API (Global State within Providers):
In the createContext() method, you're essentially creating a global variable (a context) by assigning it to createContext(). The key difference compared to lifting state to a parent is that instead of passing the state and setter through multiple components manually (prop drilling), you wrap your components inside a provider and make the state globally accessible.

You still use hooks (useState to manage the state and useContext to access it), but instead of passing the state through multiple levels, you provide it once at a higher level, and any child component can directly access it.

const CountContext = createContext(); // This is the global state container

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

  return (
    <CountContext.Provider value={{ count, setCount }}>  {/* Global access */}
      <Child />
    </CountContext.Provider>
  );
}

Access the State Anywhere (Use useContext):

function Child() {
  const { count, setCount } = useContext(CountContext); // Use the global state
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

_Instead of passing the state manually as props to every component, we pass it once inside the Provider and use useContext() wherever needed.
This way, we still use hooks (useState to manage state, useContext to access it), but we avoid prop drilling and make the state available to any component inside the provider.
_

3.Use a Third-Party State Management Library (Redux, Zustand, Recoil, etc.):
Third-party state management is a mix of useState and createContext, but with fewer steps and no need for prop drilling or a provider component.

Example: Zustand (A Simple State Management Library):

Install Zustand: Run this in your terminal:

npm install zustand

Create the State Store (Warehouse):

import { create } from "zustand"; // Import Zustand

const useStore = create((set) => ({
  count: 0, 
  increase: () => set((state) => ({ count: state.count + 1 })), 
}));

Use the State Anywhere (Without Props!):

function Button() {
  const { count, increase } = useStore(); // Access state & function directly
  return <button onClick={increase}>Clicked {count} times</button>;
}

_How It Works:
Think of third-party state management like a warehouse where all your state (data) is stored in one central place.

Components don’t own the state anymore; instead, they "ask" the warehouse for data and can "send" updates to it.

Instead of each component keeping its own state, they subscribe to the warehouse and automatically get updates when the state changes.
_