Lesson 10 — State in React (Managing Component Data)

Introduction 😊

In the previous lesson, you learned about Props, which help pass data from parent to child.

But what if a component needs to manage its own data and update the UI when that data changes?

That’s where State comes in ⚛️

In this lesson, you will learn:

• What state is in React
• Why state is important
• How to use state in function components
• Difference between props and state
• Common beginner mistakes

Let’s begin 🚀

What Is State in React? 🤔

State is a built-in object that stores data owned by a component.

👉 In simple words:

State is data that can change over time and re-render the UI.

Examples of state:

• Counter value
• Logged-in user status
• Form input values
• Toggle (ON / OFF)

Why State Is Important 🧠

Without state, React apps would be static.

State allows:

• Dynamic UI updates 🔄
• User interaction (clicks, inputs)
• Real-time changes

👉 State makes React applications interactive.

Using State in React (useState Hook) ⚛️

In function components, state is managed using the useState hook.

Basic Syntax

const [value, setValue] = useState(initialValue);

Example: Simple Counter 🔢

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

📌 What’s happening?

• count → current state value
• setCount → function to update state
• UI updates automatically on state change

Updating State Correctly ✅

State should always be updated using the setter function.

❌ Incorrect:

count = count + 1;

✅ Correct:

setCount(count + 1);

👉 Direct modification does not re-render the UI.

State with Multiple Values 🧩

You can store multiple values using objects.

const [user, setUser] = useState({
  name: "Avni",
  age: 9
});

Updating state:

setUser({ ...user, age: 10 });

👉 Always use the spread operator to keep old values.

Props vs State (Important Difference ⚖️)

👉 Props = external data
👉 State = internal data

When Should You Use State? 🤔

Use state when:

• Data changes over time
• UI needs to update
• User interaction is involved

Do NOT use state for:

• Static values
• Data passed from parent (use props instead)

Common Mistakes Beginners Make ❌

• Updating state directly
• Forgetting to import useState
• Using state when props are enough
• Overusing state unnecessarily

💡 Keep state simple and minimal.

Conclusion 🎯

State is one of the most important concepts in React.

Key takeaways:

• State stores dynamic data
• State changes re-render the UI
• useState hook manages state in function components
• State should never be modified directly
• Understanding state is essential for real-world React apps

👉 If props pass data, state controls behavior 🔥

Frequently Asked Questions (FAQs) ❓

Can a component have multiple states?

Yes. You can use multiple useState hooks.

Does state update immediately?

No. State updates are asynchronous.

Can child components access parent state?

Yes, by passing state as props.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 11 — Handling Events in React
Understanding click, input, and form events in React.