Roadmap

[lahmatiy]

Stage 0 (highest priority)

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

Stage 1

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

Stage 2

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

Stage 3

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

Stage 4

• Event trigger path tracking
• Keyboard navigation
  • Select next/prev fiber by Up/Down keys 0.6.0
  • 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
• Pause for new event receiving/processing 0.6.1
• Select a component by a click on page

Integrations

• [Feature] React-Native Support #11
• Using via import / require() #24
• Support for production & profiling React builds #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?)
• Stabilize & document event log format + add an event log saving (dump) functionality to the user interface #28
• Loading dumped event log into UI #27
• State snapshot and difference
• Side by side comparison of subtree across commits
• Data only client API (for CI purposes like reporting and comparison between revisions) 0.6.2
• 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...

[kawpii]

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?

[kawpii]

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