Ambos contienen datos que afectan lo que un componente renderiza, pero difieren en quién es el dueño de los datos y en si pueden cambiar.
- Las props se pasan de un componente desde su padre. Son de : el componente nunca debe modificarlas.
Ambos contienen datos que afectan lo que un componente renderiza, pero difieren en quién es el dueño de los datos y en si pueden cambiar.
// `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} />
Los datos fluyen hacia abajo (padre → hijo mediante props) y los cambios fluyen hacia arriba (el hijo pide al padre que cambie algo mediante una prop de callback como onChange). Este flujo unidireccional es lo que hace predecibles a las apps de React.
props.x = 1) es un bug: React no se re-renderizará y habrás roto la propiedad del padre. Para "cambiar una prop", llama a un callback que el padre te dio, de modo que el padre actualice su propio estado y pase un nuevo valor hacia abajo.