React: The Story Behind Naming Hooks & the Prepack Project with Dominic Gannaway | Build IT Better S01E21

In this interview on the "Build It Better" podcast, Tracy Lee and her co-hosts Jesse Tomchak and Adam Barrett are joined by Dominic Gannaway from the Svelte core team. Dom is known for his work on the React team. 

Tracy asks Dom about his role in naming hooks in React. Dom shares that when the team was developing hooks, they needed a name and had a list of options. He randomly suggested "hooks" as a placeholder, and they eventually decided to keep it as the official name. They thought it fit well with the concept of hooking into logic and incorporating it into a component. Dom mentions that they considered other names like "traits" but ultimately settled on hooks.

The conversation then shifts to a discussion about the React compiler project called Prepack. Dom explains that the team looked into using Prepack to optimize bundle initialization times in React Native. They experimented with compiling function components and inline them into a single component, but it didn't significantly improve performance. They encountered challenges related to the "this" keyword in JavaScript and the difficulties of serializing it for performance gains. This led them to explore building a new stateful React based on functional components that would avoid the issues with "this" and align with the goals of concurrent rendering.

Dom mentions React Forget, a newer effort that focuses on precomputing and optimizing performance and code size. He highlights that the work on improving performance and concurrent rendering is still ongoing. He mentions his conversations with Rich Harris, where their ideas on compilers seemed to align even before they formally discussed the topic.

Dom shares specifics of how Prepack compiled components inline and whether it involved a process similar to V8's runtime compilation and execution. Dom explains that they taught Prepack how React works, including JSX and non-JSX syntax. When a component with props was referenced, they treated it as a function call and created a reference. However, the performance gains from inlining components were offset by the challenges of dealing with the "this" keyword.

Overall, this interview provides insights into Dom's experiences working with compilers and awesome open source projects and is a great one to listen to! 

Panel Tracy Lee- @ladyleet  Adam L Barrett- @adamlbarrett  Jesse Tomchak- @jtomchak Dominic Gannaway- @trueadm

Build IT Better is presented by This Dot: https://www.thisdot.co/ Follow This Dot Labs on Twitter: https://twitter.com/ThisDotLabs Follow This Dot Media on Twitter: https://twitter.com/ThisDotMedia