Reverse engineering ChatGPT web interface

#565 – July 12, 2026

serving billion users with a surprisingly standard stack

Reverse engineering ChatGPT web interface
25 minutes by Dennis Brotzky

ChatGPT serves a billion users with a surprisingly standard stack: React Router 7, Tailwind, Radix, TanStack Query, and ProseMirror. The entire page is server rendered and streamed from the edge in under 100ms, with no login required. Every detail, from inlined feature flags to deferred JavaScript loading, is tuned around one goal: letting a stranger open a tab and start typing as fast as possible. The fastest path to the first token is the whole product.

Still writing tests manually? Meticulous AI is here.
sponsored by Meticulous

Most teams are forced to make the tradeoff between better coverage and more maintenance effort. But top engineering teams like Notion, Dropbox, Wealthsimple and LaunchDarkly have discovered a new testing paradigm. Built by ex-Palantir engineers, Meticulous creates and maintains E2E UI tests that covers every edge case of your web app without any developer effort - making it the only tool to improve both product quality and dev velocity.

How to prevent a modal dialog from closing with request-close
4 minutes by Sergio Xalambrí

Sergio's guide explains how to use the request-close command with React's native dialog element to control when a modal can close. Unlike the close command, request-close triggers a cancellable cancel event, allowing the dialog to stay open when needed. The tutorial also shows how to handle user decisions with returnValue and choose between close and request-close for different dialog behaviors.

Hidden cost of hydration mismatches
3 minutes by Ivan Akulov

A hydration mismatch forces React to rebuild the entire DOM from scratch. When this happens alongside web fonts loading and resizing text, the browser sees fresh DOM nodes and records a new, later Largest Contentful Paint time. This can push LCP scores from green deep into red. Fix hydration mismatches where possible, or wrap the problem element in a Suspense boundary to limit how much DOM React rebuilds.

I let React Compiler handle memoization: Here’s what actually broke
11 minutes by Isaac Okoro

React Compiler v1.0 automates memoization, so you can drop most useMemo and useCallback hooks from your code. Enabling it on a real Next.js app mostly worked, but two subtle bugs appeared: a form preview froze due to React Hook Form's incompatible internals, and removing a useCallback exposed a stale data timing issue in a chart component. Isaac suggests to run the lint rules first, keep explicit hooks where third-party libraries depend on function identity, and verify with end-to-end tests before shipping.

React compiler is a retrofit
4 minutes by Long Ho

React Compiler reduces the need for manual memoization, but it was added after the framework's core model was already set in stone. This means it has to infer what compiler-first frameworks like Svelte and Solid build in from the start. It also adds around 20% to bundle size, which matters for apps where load time is the real bottleneck. Use it where profiling shows a clear benefit, but don't mistake fewer visible memos for a cleaner foundation.

webdev

And the most popular article from the last issue was:

newsletters