In React, stateful components are components that manage and maintain their own internal state — a data structure that can change over time based on user interactions, network responses, or any other events. These components are usually class components or function components with Hooks (like useState).

The key idea is:

A stateful component remembers information between renders and can update the UI dynamically when its state changes.

Example using a Class Component:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

Example using a Functional Component with Hooks:

import React, { useState } from 'react';

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

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

---

Key Points about Stateful Components:

• Own internal state: They can track and update data over time.
• Re-render automatically: Whenever the state changes, React re-renders the component to reflect the new state.
• Useful for dynamic UIs: Perfect for forms, toggles, counters, modals, and anything that needs to interact with users or external data.

---

Quick Tip:

Components that do not manage their own state and simply receive data and render UI based on it are called stateless components.

---