react – Türker Yıldırım

React 19, and reading the release notes as an outsider

NoteDecember 16, 20242 min read

A major release in December for a library this codebase has been reducing its use of for three years. Writing down that a release does not apply is…

Interactivity, and the JavaScript we stopped shipping

Deep diveMay 15, 202414 min read

6.5 ships a shared runtime, and our blocks each carry their own script. 140 KB of JavaScript on a page with four interactive blocks.

A test that renders once because StrictMode is off

NoteMarch 28, 20231 min read

A component test passing in the suite and the same component double-fetching in development, because the test environment did not have the double invocation. The test environment and…

A block that renders on the server and edits on the client

Deep diveMarch 17, 202310 min read

A block showing live stock levels, which cannot be saved into post content. Static markup that was wrong the moment it was written.

A transition that made a filter feel instant

NoteMarch 7, 20232 min read

A filter input rendering 4,000 rows on every keystroke, where the typing lag was the rendering rather than the filtering. The input updates immediately and the list update…

useSyncExternalStore for a store that is not React’s

NoteFebruary 8, 20232 min read

Subscribing to an external store with useEffect and useState tears under concurrent rendering, which is what this hook exists to prevent. The snapshot function must return a cached…

The effect that ran twice, and the cleanup that fixed it

NoteJanuary 11, 20232 min read

Development mode mounting, unmounting and remounting every component is a diagnostic, and the double-fetch it produces is the diagnosis rather than the bug. An effect that cannot survive…

Suspense for data needs a library, still

NoteDecember 6, 20221 min read

Suspense works for lazy-loaded components and there is no supported way to suspend on a data fetch in application code. Throwing a promise is what the libraries do…

Passing a new object as a prop defeats memo

NoteSeptember 6, 20221 min read

memo compares props by reference, so an inline object, array or function is a new value on every render and the memo never hits. Passing the id to…

useId, for an id that matches between server and client

NoteMarch 29, 20222 min read

A generated id from a counter or a random value differs between the server render and the client hydration, which is a mismatch React now reports. The colons…