dev/atlas
한국어
() React & state patterns

React Compiler

React 컴파일러

A build-time compiler analyzes components and automatically memoizes values and render work.

···
html
<div class="scene"><b>ONE PARENT UPDATE</b><div class="row"><span>without</span><div id="manual" class="bars"></div></div><div class="row"><span>compiler</span><div id="compiled" class="bars"></div></div><div class="label" id="note">cache boundary reuses unchanged work</div></div>
css
.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.scene>b{color:var(--accent)}.row{display:flex;align-items:center;gap:8px;margin:clamp(15px,6vmin,42px) 0}.row span{width:25%}.bars{flex:1;display:flex;gap:4px;height:clamp(20px,7vmin,42px)}.bars i{flex:1;background:var(--accent-3);border-radius:4px;opacity:.3;transition:opacity .25s}#compiled i{background:var(--accent)}.bars i.on{opacity:1}.label{text-align:center}
js
for(const id of ["manual","compiled"])document.getElementById(id).innerHTML="<i></i><i></i><i></i><i></i><i></i>";let n=0;function tick(){[...document.querySelectorAll("#manual i")].forEach((x,i)=>x.classList.toggle("on",i<=n%5));[...document.querySelectorAll("#compiled i")].forEach((x,i)=>x.classList.toggle("on",i===0||i===n%5&&n%5===4));document.getElementById("note").textContent="update "+(n%5+1)+": unchanged work reused";n++}tick();setInterval(tick,800)
···

Manual memoization수동 메모이제이션

Reuse a value or function reference while dependencies stay equal to avoid unnecessary work.

···

React Compiler lint diagnosticsReact 컴파일러 린트 진단

Find React rule violations so the compiler can optimize code safely.

···

React Performance TracksReact 성능 트랙

Inspect React scheduling and component work inside browser performance recordings.

···

Activity componentActivity 컴포넌트

Preserve hidden screen state while prioritizing the visible screen.

React Compiler 1.0 is a stable build-time tool that analyzes components and hooks to add automatic memoization. It can avoid repeated work without hand-placing useMemo and useCallback everywhere.

The demo compares work cells during the same parent update with and without compiler caching. Actual savings depend on the app. Code that breaks React rules may be skipped, so inspect lint diagnostics too.

When to use

Adopt it incrementally when repeated React work is costly, then verify with profiling.

Open as page ↗