In React, components are the building blocks of the UI, and state management is how data is stored and updated within them. Understanding how components work and how to manage state effectively is essential for building scalable React applications.

---

What Are Components?

A component is a reusable piece of UI that can be independent or composed with other components.

Types of Components:

1. Functional Components (Recommended)
2. Class Components (Legacy)

✅ Functional Component (Modern Approach)

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

❌ Class Component (Older Approach)

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

React now favors functional components with hooks because they are simpler and more efficient.

---

State Management in React

State is data that changes over time within a component. React re-renders the UI whenever state updates.

Using useState Hook

The useState hook allows functional components to store and update state.

✅ Example of 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>
  );
}

How useState Works:

• useState(0): Initializes state with 0.
• setCount(count + 1): Updates state, triggering a re-render.

---

Props vs. State

Feature	Props	State
Definition	Data passed from parent to child	Data managed within a component
Mutability	Read-only (cannot be modified by child)	Can be updated with setState (or useState)
Example	<Greeting name="Alice" />	const [count, setCount] = useState(0);

---

Lifting State Up

When multiple components need shared state, state is lifted up to the nearest common ancestor.

✅ Example of Lifting State

function ParentComponent() {
  const [value, setValue] = useState("Hello");
  return <ChildComponent value={value} setValue={setValue} />;
}

function ChildComponent({ value, setValue }) {
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue("Updated!")}>Update</button>
    </div>
  );
}

---

Advanced State Management

For larger applications, React Context or state management libraries like Redux or Zustand are used.

Using Context API (Avoid Prop Drilling)

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const theme = React.useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

---

Summary

• Components are the fundamental building blocks of React.
• State is mutable data that causes re-renders when updated.
• Props pass data between components, but cannot be modified.
• Lifting state up allows shared state between components.
• Context API helps manage global state without prop drilling.

References

1. React Docs – Components
2. React Docs – State and Lifecycle
3. React Docs – Context

---