Mi a különbség a props és a state között?

Mindkettő olyan adatokat tárol, amelyek befolyásolják, hogy egy komponens mit renderel, de kinek tartozik az adat és módosítható-e tekintetében eltérnek egymástól.

• props az anyakomponensből kerülnek be egy komponensbe. Csak olvasható — a komponens soha nem módosíthatja őket.
• state a komponensben van és a komponensben kezelhető belül. Idővel változhat, és a módosítása újrarenderelést vált ki.

Példa

// `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} />

Az adat lefelé folyik (szülő → gyermek props-on keresztül) és a módosítások felfelé folynak (a gyermek arra kéri a szülőt, hogy valamit módosítson egy callback prop-on keresztül, például onChange). Ez az egyirányú áramlás az, ami a React alkalmazásokat előre jelezhetővé teszi.

Hogyan döntsön, melyiket kell használni

• Felülről érkezik, és a komponens nem módosíthatja — prop.
• A komponensnek idővel módosítania kell — state.
• Props módosítása (props.x = 1) hiba — a React nem fog újrarenderelni, és az anyakomponens tulajdonjogát megtörted. A "prop módosításához" hívd meg az onChange callback-et, amit az anyakomponens adott neked, hogy az anyakomponens frissítse a saját state-jét és új értéket adjon lefelé.