Misko Hevery - Speeding Up Your React App With Less JavaScript, React Summit 2023

Discover how to optimize React app performance by reducing JavaScript payload. Explore hydration, resumability, QUIC, islands, inter-island communication, partial hydration, and more.

Key takeaways
  • The amount of JavaScript shipped to browsers has increased over the years, leading to poor startup performance.
  • Hydration is a process of finding and executing listeners and state for React components.
  • The problem with hydration is that it can cause a white box to appear on the page before the component is interactive.
  • Resumability is a feature that allows components to be paused and resumed without losing state.
  • QUIC is a protocol that can be used to hydrate React components lazily, improving startup performance.
  • Islands are components that are isolated from each other and can communicate with each other through a central state.
  • The inter-island communication problem is how to allow islands to communicate with each other without introducing too much overhead.
  • Frameworks like Astro and Fresh use the island approach to improve performance.
  • Partial hydration is a technique that can be used to hydrate components only when they are needed, improving startup performance.
  • The less JavaScript you ship, the better your startup performance will be.