Rerenders en React

 ¿React vuelve a renderizar un componente sólo cuando cambia su estado intetno o también cuando cambian sus props?

React vuelve a renderizar un componente en dos situaciones principales:

🔹 Cuándo ocurre un re-render

• Cambio de estado interno (useState, useReducer) Cada vez que actualizás el estado de un componente, React lo vuelve a renderizar para reflejar la nueva UI.

• Cambio de props recibidas Si el componente padre le pasa nuevas props (aunque sea un valor distinto en referencia, como un nuevo objeto o array), React vuelve a renderizar el hijo.

📌 Ejemplo simple

jsx

function Hijo({ valor }) {
  console.log("Render hijo")
  return <p>{valor}</p>
}

function Padre() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <Hijo valor={count} />
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  )
}

• Cada vez que count cambia, el padre se renderiza.

• El hijo también se renderiza porque recibe una prop distinta (valor).

🔹 Optimización

• Si querés evitar renders innecesarios cuando las props no cambian, podés usar React.memo en componentes funcionales.

• También podés usar useMemo o useCallback para estabilizar referencias de objetos y funciones, evitando que React piense que son “nuevas” en cada render.

✅ Conclusión

React re-renderiza un componente tanto cuando cambia su estado interno como cuando cambian sus props. Luego, el reconciliador compara el nuevo árbol con el anterior y actualiza solo lo necesario en el DOM virtual .

¿Querés que te arme una tabla comparativa con ejemplos de qué cambios disparan un re-render y cuáles no (estado, props, context, refs, etc.)?