Roadmap

[lahmatiy]

Stage 0 (highest priority)

• [x] Make it works with React devtools
• [x] Fix render root's mount/unmount after init (otherwise crash)
• [x] Optimize event log transfering to fetch an events delta on UI side (to work well with large apps)
• [x] Limit event log by N last events with option to load more events (to work well with large apps)
• [x] Setup build a bundle for publish to NPM
• [x] Event log for a component's subtree
• [x] Add a brief description in readme (at least how to use)
• [x] Make repo public & publish to npm

Stage 1

• [x] Details on update (rerender) reasons
• [x] Fix an order of events in the way React performs them
• [x] Commit boundaries in event log / timestamp
• [x] Reset stats i.e. clean event log (#9, @ilyaryabchinski)
• [x] Optimize render tree rendering (avoid entire tree re-rendering) (v0.2)

Stage 2

• [x] Display a hook path to useState/useDispatcher (v0.4)
• [x] Statistics for a component type (v0.5)
• [x] Pick a subtree i.e. show only a subtree in the render tree (v0.5)
• [x] Rework component filter into find component
  • [x] Don't hide tree leafs
  • [x] Scroll into view next/prev (v0.5)
• [x] Scroll into view for selected component (v0.5)

Stage 3

• [x] Display props updates and update bailouts based on props 0.6.0
• [x] Display contexts used on components 0.6.0
• [x] Display which components are affecting by a context 0.6.0
• [x] Display locations where setState()/dispatch() hook's callbacks are called 0.6.0
• [x] Display locations where setState()/forceUpdate() methods are called 0.6.0
• [x] Display changes for useMemo()/useCallback() 0.6.0
• [x] Open a location in a editor 0.6.0
• [x] Resolve locations using source maps 0.6.0
• [x] Detect and display bailouts 0.6.0
  • [x] React.memo()
  • [x] shouldComponentUpdate()
  • [x] state didn't changed
  • [ ] the same element (same type, props, no context change)

Stage 4

• [ ] Event trigger path tracking
• [ ] Keyboard navigation
  • [x] Select next/prev fiber by Up/Down keys 0.6.0
  • [x] Select next/prev matched fiber by Up/Down keys on search input 0.6.0
  • [ ] Expand/collapse fibers on tree
  • [ ] Select next/prev similar fiber
  • [ ] ...
• [ ] Custom event logging i.e. app could generate some time marks like scenario start/finish – this could be used to observe events between two time marks
• [x] Pause for new event receiving/processing 0.6.1
• [x] Select a component by a click on page

Integrations

• 11

• 24

• 25

Backlog

• [ ] Write a tutorial(s) how to use the tool
• [ ] Filter events i.e. filter by component name, event type, duration etc
• [ ] Restore selection after reload (need for persistence?)

• 28

• 27

• [ ] State snapshot and difference
• [ ] Side by side comparison of subtree across commits
• [x] Data only client API (for CI purposes like reporting and comparison between revisions) 0.6.2
• [x] Integration with headless browser libraries Puppeteer/Playwright 0.6.2
• [ ] Events playback i.e. visualize how a render tree was updated with a control by a slider
• [ ] Optimize render tree rendering by using virtualization
• [ ] Optimize event log updates (avoid entire event log re-rendering)
• [ ] Display timings for various phases in React
• [ ] Persistence for settings
• [ ] Descriptive card for a component: size of subtree, used components etc
• [ ] Descriptive card for the entire tree: number of used components etc
• [ ] Aggregated event stat in event log i.e. pie chart or smth like that with dominants by durations
• [ ] Stick event log to the bottom
• [ ] Track effect events (useEffect/useLayoutEffect)
• [ ] Hints for improvements: too many hooks, use/don't use React.memo etc
• [ ] Discovery.js integration
• TDB...

[kaushalyap]

Moving out of Rempl is missing from the backlog

[lahmatiy]

@kaushalyap There is no plans to out of rempl, because it's a foundation for communication between React's internals integration which collects data and UI. It's not clear to me, why it should be on the list?

[kaushalyap]

since Rempl have not being updated for a long time.

[popuguytheparrot]

Maybe you should create an issue for each checkbox so that developers can close them?

[zurex]

It should be works with create react app in production build.

[KatFishSnake]

@lahmatiy Does it happen to work with React 18?

[lahmatiy]

@KatFishSnake I did't tested it well with React 18, but it should. Did you tried it? Do you have any issues?

[KatFishSnake]

@KatFishSnake I did't tested it well with React 18, but it should. Did you tried it? Do you have any issues?

@lahmatiy sorry preemptively messaged before actually testing it, just i know there's quite a bit of difference in rendering logic that i assume you tap in for analytics,

Ill test and follow up, thank you