Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#30 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
30/100
Tipo de issue
Funcionalidade
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
developer-experience, devtools

Direção de pesquisa

Leia a issue #18 e devtools-bridge.ts:103-126 e :131 para entender o profiling de chaves alteradas e inspectElement. Compare as abordagens snapshot, targeted-watch e direct-fiber e, em seguida, defina qual abordagem e qual comportamento de desempenho/precisão o recurso aceitará; a issue atualmente não especifica uma única implementação nem um único teste.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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)
Linguagem predominante
TypeScript
Estrelas
251
Forks
13
Merge médio
3min
PRs com merge (30d)
1

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstackincubator/agent-react-devtools

Todas as issues de callstackincubator/agent-react-devtools

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.