What is the difference between state and props?

In React, props are the component's input data, passed to it by the parent component and cannot be changed within the component itself. They are used for passing information and configuration.

State is the component's internal data that can change during its lifecycle. Changing the state triggers a re-render of the component.

Example:

function Counter(props) {
  const [count, setCount] = React.useState(0); // state

  return (
    <div>
      <h1>{props.title}</h1> {/* props */}
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Here, title is a prop, and count is the state.