What is the difference between state and props in React?

Props are data a component receives from its parent and cannot modify. State is data the component itself owns and can change over time; when it changes, React re-renders the component. The key question is: who owns the data?

Both are "data a component uses", but they differ in ownership and control:

• Props: come from outside. The component receives, reads, and uses them, but doesn't modify them. If the parent passes a new value, the child re-renders with that value.
• State: lives inside. The component creates it with useState, owns it, and updates it with the set function. Each update triggers a re-render of that component (and its children).

Practical rules to decide:

• Does the data change over time through user interaction (an input, a counter)? → state.
• Does the data come from another component or is it fixed configuration? → props.
• Can it be computed from props or from other state? → neither: compute it during render.
• Do two siblings need the same data? → the state moves up to the common parent ("lifting state up") and comes down to both as props. The same data can be state in the parent and a prop in the child.

import { useState } from "react";

// Child: receives everything via props, has no state of its own.
type MarcadorProps = { puntos: number; onSumar: () => void };

function Marcador({ puntos, onSumar }: MarcadorProps) {
  // `puntos` is a prop: here it's only read.
  return (
    <div>
      <p>Puntos: {puntos}</p>
      <button onClick={onSumar}>Sumar</button>
    </div>
  );
}

// Parent: owns the data, so it stores it as state.
function Juego() {
  const [puntos, setPuntos] = useState(0); // initial state: 0
  // "puntos" is STATE here and travels as a PROP to Marcador.
  return <Marcador puntos={puntos} onSumar={() => setPuntos((p) => p + 1)} />;
}

// Expected behavior: initial render "Puntos: 0". On click,
// the parent updates its state and the child receives the new prop: "Puntos: 1".

Copying a prop into local state "so you can use it":

type Props = { nombre: string };

function Perfil({ nombre }: Props) {
  // BAD: if the parent changes `nombre`, this state keeps the old value,
  // because useState only uses the initial value on the FIRST render.
  const [nombreLocal] = useState(nombre);
  return <p>{nombreLocal}</p>;
}
function PerfilBien({ nombre }: Props) {
  return <p>{nombre}</p>; // GOOD: always reflects the current prop
}

The fix: if the data comes from the parent, use it directly from the props. Only copy a prop into state if you truly want an initial value that will then live on its own (for example, an editable draft).

"The difference lies in who owns the data. Props come from the parent and are read-only: the child consumes them but doesn't modify them. State is data internal to the component, created with useState, and when I update it with its set function, React re-renders the component to reflect the change. I use state for data that changes through user interaction, and props to configure components from outside. And if two siblings need the same data, I lift the state up to the common parent and pass it down as props."