In this tutorial, we explore the concept of state in React and how it allows components to be dynamic and self-aware. This lesson is foundational for React developers aiming to build interactive user interfaces.

---

1. Props vs. State

• Props: Passed from parent to child, immutable by the receiving component.
• State: Declared within a component, mutable, and triggers re-renders when updated.

---

2. Declaring State

State is initialized in the constructor of a React component:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clicks: 0
        };
    }
}

• The constructor is where we define the initial state.
• React will track state changes and automatically re-render the component when state is updated.

---

3. Updating State with setState

React provides the setState method to safely update state and trigger re-renders:

handleClick = () => {
    this.setState((prevState) => ({
        clicks: prevState.clicks + 1
    }));
};

• Never mutate state directly (e.g., this.state.clicks++ is incorrect).
• Use setState to ensure React knows a change has occurred.

---

4. Binding State Updates to Events

In this example, a button click updates the state and reflects the change in the UI:

render() {
    return (
        <button onClick={this.handleClick}>
            {this.state.clicks}
        </button>
    );
}

---

5. React’s Re-Rendering Behavior

• When setState is called, React automatically calls the render method.
• Only the updated parts of the DOM are re-rendered, making React efficient.

---

Key Takeaways

1. State Tracks Changes: State allows components to be interactive and self-updating.
2. Use setState: Always use setState to update state safely and trigger React’s lifecycle methods.
3. Dynamic UI Updates: Bind state updates to events for dynamic, user-driven UI changes.

---

This tutorial introduced the basics of state in React. In the next session, we’ll build on this knowledge to create state-driven animations for interactive user interfaces.