Reconciler v pěti minutách

Reconciler je jádro Reactu. Jeho úkol je jednoduchý: srovnat, co bylo, s tím, co má být, a co nejlevněji upravit DOM. Vše ostatní — hooks, effects, transitions — jsou stavební kameny nad ním.

Když napíšeš setState, React neběží hned do DOMu. Zavolá reconciler, ten porovná nový a starý strom a naplánuje minimální sadu úprav. To „naplánuje" je klíčové slovo.

Fiber: prvek tree, ale i jednotka práce

Před verzí 16 měl React rekurzivní stack reconciler — jednu velkou funkci, která rekurzivně procházela strom. Neuměla se přerušit. Pokud jsi měl velký strom, blokovala hlavní vlákno.

Fiber je datová struktura, která je zároveň uzel stromu i jednotka práce. Není to náhoda — díky ní se dá práce přerušit, odložit a zprioritizovat.

Každý fiber uzel drží:

• odkaz na komponentu (typ, props)
• odkaz na rodiče, sourozence, potomka (linked list, ne pole)
• efekty, které se mají spustit
• prioritu

To poslední je důvod, proč vůbec existují priority updaty jako startTransition.

Dvě fáze: render a commit

Reconciler pracuje ve dvou striktně oddělených fázích.

Render (asynchronní, přerušitelná):

React prochází stromem, volá render funkce, sestavuje work-in-progress fiber tree. Nic se ještě nekreslí. Když přijde vysokoprioritní update (třeba kliknutí), React tuto fázi klidně zahodí a začne znovu.

Commit (synchronní, neblokovaná):

Když je render tree hotový, React ho v jedné synchronní dávce naaplikuje na DOM. Tady běží také useLayoutEffect. Commit je krátký a nikdy se nepřerušuje — jinak by uživatel viděl blikání.

Co si z toho odnést do kódu

Fiber je proč můžeš startTransition(() => setBigList(x)) a UI zůstane responzivní. Ne proto, že jsi to napsal chytřejším způsobem, ale protože reconciler dostal signál „tohle nespěchá".

Když se ptáš, proč to konkrétní React chování vypadá jak vypadá — devkrát z desíti je odpověď „fiber a jeho priority scheduler".

Doporučená hloubka:

• React reconciler as a black box — pravidla, ne implementace
• Zdrojáky Reactu jsou překvapivě čtivé, začni od packages/react-reconciler/src/ReactFiberWorkLoop.js