SYSTEM Cited by 4 sources

React

React is Meta's open-source front-end UI framework. Component- based declarative rendering model; virtual DOM diffing. React 18 added renderToPipeableStream / renderToReadableStream for streaming SSR, <Suspense> boundaries, and concurrent features. React 19 fixed a number of 18-era hydration issues (see Atlassian's Confluence case).

Relevant primitives (covered by ingested sources)

• useEffect — side-effect hook. Scattered useEffects on a hot-path component tree defeat memoization and trigger extra re-renders; GitHub's v2 diff-line rewrite restricted useEffect to the top level of diff files with ESLint enforcement. See systems/github-pull-requests.
• <Suspense> boundaries — Streaming SSR's unit of incremental commit; see patterns/suspense-boundary and systems/confluence-streaming-ssr.
• renderToPipeableStream — Node.js streaming-render API used by Atlassian Confluence's SSR.
• Event handlers on components — default React pattern of attaching handlers per component can compound pathologically on hot paths (concepts/hot-path); GitHub's v1 had 5-6 handlers per component × 8-13 components per diff line = 20+ per line, replaced by one top-level handler + data-attribute dispatch (patterns/single-top-level-event-handler).
• useState / local component state — moving expensive state into conditionally-rendered child components (so the state only exists where it's used, not multiplied by every ancestor that could have it) is the GitHub v2 shape (patterns/conditional-child-state-scoping).
• React.memo / memoization — enabled by strict useEffect discipline + stable props; load-bearing for v2's 74 % reduction in rendered-component count on GitHub's Files-changed tab.

Stub

This page only covers the React capabilities named in currently- ingested sources. Broader React architecture (fiber, reconciler, hooks model, concurrent mode, server components beyond streaming SSR, React Native) is out of scope.

Seen in

• sources/2026-04-03-github-the-uphill-climb-of-making-diff-lines-performant — GitHub's Files-changed-tab rewrite; v1's small-reusable- components + per-line event handlers pathology, v2's dedicated-per-view + conditional-child-state + single-top-level- handler + useEffect discipline.
• sources/2026-04-16-atlassian-streaming-ssr-confluence — Atlassian Confluence's React-18 streaming SSR with renderToPipeableStream + <Suspense>; React-18-era context re-render bug caught in A/B rollout, fixed in React 19.
• sources/2025-10-14-cloudflare-unpacking-cloudflare-workers-cpu-performance-benchmarks — Cloudflare profiled React SSR + Next.js + OpenNext as part of responding to a public benchmark; surfaced React's heavy internal use of JSON.parse(text, reviver) (100,000+ reviver invocations per Next.js request on the benchmark — Chromium CL 7027411 upstreams a ~33 % parse-with-reviver speedup) and React / Next.js passing bytes through value-oriented ReadableStreams with default highWaterMark: 1 (one enqueue = one read; see concepts/stream-adapter-overhead). React's default dev-mode behavior when NODE_ENV is unset was also one of the benchmark biases identified.

Related

• concepts/react-hydration — client-side activation of server- rendered markup; ordering relative to state injection is load- bearing.
• concepts/react-re-render — wasted-work class in React UIs; core target of GitHub's v1 → v2 work.
• concepts/streaming-ssr — React 18's contribution to SSR.
• concepts/window-virtualization — complements React for very-long-list rendering at scale.
• systems/tanstack-virtual — virtualization library on top of React.
• systems/confluence-streaming-ssr — canonical wiki instance of React 18 streaming SSR.
• systems/github-pull-requests — canonical wiki instance of React-runtime hot-path optimization.

In Figma's game-engine-shaped client stack

Figma's 2026-04-21 game-engine-inspiration post (sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world) makes the workload-split rationale for React explicit: Figma's canvas is C++ compiled to WebAssembly (performance-critical rendering), but the UI layer is deliberately React + TypeScript because "C++ does not come with great libraries for delightful and responsive user interface engineering, so we opted to write our UI layer in React and TypeScript instead."

Canonical patterns/game-engine-stack-for-web-canvas instance: native language (C++) for canvas, React+TS for the UI shell, Rust for the server. See systems/typescript for the peer language-choice entry and systems/figma-multiplayer-querygraph for the real-time collaboration server at the other end of the WebSocket.