React States

This document explores state in React class components, including local and shared state, how state enables dynamic UI updates, and the differences between state and props. It provides practical examples and a comparison table for clear understanding.

Introduction to State in React

State in React is a plain JavaScript object used to represent information about a component’s current situation. State allows components to create dynamic and interactive user interfaces by tracking and responding to changes in data.

Types of State: Local and Shared

• Local State: Lives within a single component and cannot be accessed by others. Used for UI elements like toggles or form fields.
• Shared State: Can be accessed and modified by multiple components, often managed in a parent component and passed down via props.

How State Works in Class Components

• State is initialized in the constructor as an object with key-value pairs.
• State is updated using this.setState, which triggers a re-render of the component.
• State is used to track changes in forms, buttons, timers, and more.

Example: Counter with State

 1class Counter extends React.Component {
 2  constructor(props) {
 3    super(props)
 4    this.state = { count: 0 }
 5  }
 6
 7  increment = () => {
 8    this.setState({ count: this.state.count + 1 })
 9  }
10
11  render() {
12    return (
13      <div>
14        <p>Count: {this.state.count}</p>
15        <button onClick={this.increment}>Increment</button>
16      </div>
17    )
18  }
19}

Props vs State

Props and state are both used to manage data in React, but they serve different purposes:

Example: Using Props and State Together

 1class TestComponent extends React.Component {
 2  constructor(props) {
 3    super(props);
 4    this.state = { id: 1, name: props.name, age: 25 };
 5  }
 6
 7  render() {
 8    return (
 9      <div>
10        <p>Name: {this.state.name}</p>
11        <p>Age: {this.state.age}</p>
12      </div>
13    );
14  }
15}
16
17// Usage
18<TestComponent name="John" />
19<TestComponent name="Jill" />

Key Points

• State enables components to track and respond to user interactions.
• State changes cause components to re-render, keeping the UI up to date.
• Props are used to pass data and methods from parent to child in a unidirectional flow.
• State is managed within the component, while props are received from outside.

Conclusion

State is fundamental to building interactive React components. It allows components to manage their own data, respond to user actions, and update the UI dynamically. Understanding the distinction between state and props is essential for effective React development.

FAQ