react-scan

I’ve been exploring React.js internals and found them hard to access, so I reverse-engineered how React DevTools hooks into React and built a package: https://github.com/aidenybai/bippy For a bit of context: React represents UI as a tree of "fibers," which hold data like props, state, and context. React updates UI in two phases: render (building the fiber tree) and reconciliation (scheduling & diffing fibers to update the DOM). My tool works by simulating __REACT_DEVTOOLS_GLOBAL_HOOK__ to expose React internals without using DevTools: import { instrument, traverseFiberRoot} from 'bippy'; instrument({ onCommitFiberRoot: traverseFiberRoot({ onRender(fiber) { console.log(fiber); }, }), }); I’ve found it pretty useful for detecting re-renders (I made a separate tool to highlight renders on the page https:/

>it’s all prioritisation of developer experience over user experience. And I have been saying this for well over a decade. Hopefully it catches on. I have always asked for example of sites done in React where I couldn't tell it is done in React or other JS Front End. The "at worst, hundreds of milliseconds" is precisely why Web Apps never felt as good as native apps. And if we collectively cant make web apps good, why not go back to Interactive Web Pages that is mostly Jank Free. I say mostly because it is still not Native Apps level. Recently submitted, [1] why does liking a tweet re-render the entire screen? done using [2] React-scan. [1] https://x.com/aidenybai/status/1862529226727121366 [2] https://github.com/aidenybai/react-scan