Mikä on ero propsien ja staten välillä?

Molemmat pitävät sisällään tietoa, joka vaikuttaa siihen, mitä komponentti renderöi, mutta ne eroavat siinä, kuka omistaa tiedot ja voiko sitä muuttaa.

• props välitetään komponenttiin sen isäntäkomponentista. Ne ovat vain luku — komponentti ei saa koskaan muokata niitä.
• state omistetaan ja hallinnoidaan komponentin sisällä. Se voi muuttua ajan myötä, ja sen muuttaminen käynnistää uudelleenrenderöinnin.

Esimerkki

// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + step)}>
      {count}
    </button>
  );
}

// Parent decides the step and passes it down:
<Counter step={5} />

Tiedot virtaavat alaspäin (isäntä → lapsi propsien kautta) ja muutokset virtaavat ylöspäin (lapsi pyytää isäntää muuttamaan jotakin callback-propsilla kuten onChange). Tämä yksisuuntainen virtaus tekee React-sovelluksista ennakoitavia.

Kuinka päättää, kumpaa käyttää

• Tulee ylhäältä ja komponentti ei saa muuttaa sitä → prop.
• Komponentin on muutettava sitä ajan myötä → state.
• Propsien muuttaminen (props.x = 1) on virhe — React ei renderöi uudelleen ja olet rikkonut isännän omistajuutta. "Propsien muuttamiseksi" kutsu callback-funktiota, jonka isäntä antoi sinulle, jotta isäntä voi päivittää oman tilansa ja välittää uuden arvon alaspäin.