← React Beginner Questions - Set 2 Q17

What is the difference between props and state?

React Beginner Questions - Set 2

One example makes the boundary visible: the parent owns the state, the child only receives it as props and reports back through a callback.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { useState } from 'react';

// Child: no state of its own, props in, event out
function Temperature({ celsius, onWarm }) {
  return (
    <div>
      <p>{celsius}°C</p>
      <button onClick={onWarm}>Warm up</button>
    </div>
  );
}

// Parent: owns the value and the rule that changes it
export default function Thermostat() {
  const [celsius, setCelsius] = useState(20);

  return <Temperature celsius={celsius} onWarm={() => setCelsius(c => c + 1)} />;
}

What to notice

• Props are read-only in the child: assigning to them silently does nothing useful.
• State is private to the component that declares it; other components see it only through props.
• Lifting state up = moving it to the closest common parent, which is exactly what this example does.