Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

feat: capture before/after values for changed props/state/hooks during profiling

Abierto
#30 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
30/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react, typescript

Línea de trabajo

Lee issue #18 y devtools-bridge.ts:103-126 y :131 para entender el profiling de claves modificadas e inspectElement. Compara los enfoques snapshot, targeted-watch y direct-fiber, y después define qué enfoque y qué comportamiento de rendimiento/precisión aceptará la funcionalidad; actualmente, el issue no especifica una única implementación ni una única prueba.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement

Problem

Issue #18 surfaces the names of changed props/state/hooks in profiling output (e.g. props: onClick, className), but not their actual values. Knowing that className changed is useful, but knowing it changed from "btn" to "btn active" would be far more actionable for debugging.

The React DevTools profiling protocol only sends key names — values are not included by design (to keep profiling lightweight).

Possible approaches

Option A: Snapshot-based diffing (heavy, comprehensive)

During profiling, call inspectElement() after each commit for every component that changed. Store snapshots and diff consecutive ones to reconstruct before/after values.

  • Pro: Uses existing infrastructure — inspectElement already works over the DevTools WebSocket protocol
  • Con: inspectElement is async over WebSocket. Calling it for every changed component after every commit adds significant overhead and could slow profiling on busy apps
  • Con: "Before" values are approximated (previous snapshot), not true pre-commit values
Option B: Targeted watch mode (practical middle ground)

Let the user specify components to watch during profiling (e.g. profile-watch @c5). Only snapshot those specific components after each commit, reducing overhead.

  • Pro: Practical performance trade-off — overhead scales with watched components, not total tree size
  • Pro: User explicitly opts in, so the cost is expected
  • Con: Requires knowing which components to watch upfront (could combine with a post-hoc "inspect the top offenders" step)
Option C: Direct fiber access (fragile, precise)

Inject custom code into the page that reads fiber.memoizedProps / fiber.pendingProps during onCommitFiberRoot to capture true before/after values at commit time.

  • Pro: Would give true before/after values with no async overhead
  • Con: Very fragile — fiber internals are not a public API and break across React versions
  • Con: Requires forking or monkey-patching React DevTools backend code
  • Con: Significant implementation complexity

Context

  • Depends on #18 (surface changed key names first)
  • The tool connects to React via the DevTools wire protocol over WebSocket (devtools-bridge.ts)
  • inspectElement() can already fetch full props/state/hooks on demand (devtools-bridge.ts:103-126)
  • Profiling uses recordChangeDescriptions: true which only enables key name tracking (devtools-bridge.ts:131)
Lenguaje dominante
TypeScript
Estrellas
243
Forks
12
Merge medio
11 h 22 min
PR fusionados (30 d)
2

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de callstackincubator/agent-react-devtools

Todos los issues de callstackincubator/agent-react-devtools

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.