lahmatiy/react-render-tracker

Roadmap

lahmatiy opened this issue · 8 comments

lahmatiy commented

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 (#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

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
  • 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...
kaushalyap commented

Moving out of Rempl is missing from the backlog

lahmatiy commented

@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 commented

since Rempl have not being updated for a long time.

popuguytheparrot commented

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

zurex commented

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

KatFishSnake commented

@lahmatiy Does it happen to work with React 18?

lahmatiy commented

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

KatFishSnake commented

@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