Trazador
Ejecución de React, paso a paso
Cada paso de esta traza es una llamada real del algoritmo de React, no una analogía. Movete con las flechas y mirá cómo cambia la cadena de hooks, el árbol de fibers y la salida.
¿Qué pasa exactamente entre el click y el número nuevo?
AGENDADOpaso 1 / 96Traza
Cadena de hooks · <—>
Sin hooks en este paso.
Árbol de fibers
- <HostRoot>
Salida
Nada en el host todavía. React no commiteó ningún cambio.
createRoot().render()
Montaje inicial. No hay árbol previo, así que todo se va a crear desde cero.
VER EL CÓDIGO QUE SE ESTÁ TRAZANDO
1function Contador() {2 const [n, setN] = useState(0);3 4 return (5 <div>6 <p>Valor: {n}</p>7 <button onClick={() => setN(n + 1)}>sumar 1</button>8 </div>9 );10}Con el foco acá: ← → un paso · espacio reproduce · Inicio/Fin van a los extremos.