What is State in React? What's the difference between State and Props? React में State क्या है? State और Props में क्या अंतर है?

// State with functional component (useState hook)
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('John');
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            
            <p>Name: {name}</p>
            <input onChange={(e) => setName(e.target.value)} />
        </div>
    );
}

// State with class component
class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, name: 'John' };
    }
    
    handleIncrement = () => {
        this.setState({ count: this.state.count + 1 });
    }
    
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.handleIncrement}>Increment</button>
            </div>
        );
    }
}

// Multiple state updates
function Form() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        age: ''
    });
    
    const handleChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });
    }
    
    return (
        <form>
            <input name='name' onChange={handleChange} />
            <input name='email' onChange={handleChange} />
            <input name='age' onChange={handleChange} />
        </form>
    );
}

// State updates are asynchronous
function Demo() {
    const [count, setCount] = useState(0);
    
    const handleClick = () => {
        setCount(count + 1);
        // count is still 0 here (asynchronous)
    }
}

// Batch state updates (React 18+)
function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
    
    const handleClick = async () => {
        // These updates are batched
        setCount(c => c + 1);
        setText('Updated');
    }
}