A deep dive into React Native DevTools internals and how to create custom, extensible plugins without forking.

Have you ever explored how React works under the hood, in its source code? As a Senior Frontend Developer specializing in React, surprisingly, I hadn't until this year, when I decided to make it a priority.

Spoiler alert - it's not easy! The React and React-DOM bundles that come in the npm packages don't expose source maps, and certain transformations make the code hard to read. So I decided to figure out how I could bundle the source code myself to facilitate following along in a few courses I found on React internals. This talk presents that process and the pretty-good but still work-in-progress outcome.

In this talk, I'll uncover some tricks and hacks in React that I learned while maintaining a micro-library (2KB Router). We'll discuss performance and size optimizations, as well as the importance of keeping object references stable when passing them down as props to React components.

I'd like to cover the non-standard use of the useState hook, cloneElement API for component composition, the useSyncExternalStore hook introduced in React 18, and its caveats; as well as lesser-known non-standard hooks such as useEvent and more. To demonstrate these tricks, we'll built a fake multiplayer client component.

React 19 came out with a lot of new APIs but I still see devs falling back to plain'ol useState and useEffect for everything. Lets explore alternatives.