Skip to content

Omaima-Ameen/concurrent-rendering

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 

Repository files navigation

Welcome to Concurrent Rendering.

Where React doesn't block the road, it negotiates with it


So What Even Is Concurrent Rendering?

Earlier rendering was like:

React gets an update - > React locks the door - > React finishes everything - > UI updates

Single threaded & Brutal.

That means if something took long, the user waited...

Concurrent rendering flips the vibe

React can pause, resume, restart, or even throw away a render when better info arrives.

This allows React to stay responsive while heavy work is happening in the background.


Why This Exists

With scheduling, React learned priorities. But with concurrent rendering, React learned flexibility.

Scheduling = deciding which work matters more

Concurrent rendering = actually executing that work in a flexible, interruptible way

You have priorities? Nice. Now you need a system that doesn’t freeze when low-priority work is running.

That’s concurrency


How React Pulls This Off?

React breaks rendering into small pieces (units of work). It doesn't do them all at once - it checks in with the browser after each piece and if the browser says that user is interacting! - > React pauses the render More important update came! - > React throws away old work

This magic is powered by :

✔️ Fiber architecture

React's internal data structure that makes pausing/resuming possible.

✔️ Lane priorities

The priority lanes you learned in scheduling are used here to decide which render wins.

✔️ Interruptible work loop

React literally renders like it's checking “battery percentage” after every tiny step.

Concurrent rendering doesn't require new APIs from you (React hides the machinery). But you must design like a concurrent thinker:

Expect renders to run twice Expect renders to pause and resume Expect that a low-priority render may never finish Write pure, side-effect-free render logic Never depend on render will always complete

If scheduling was about planning, concurrent rendering is about execution without freezing.

You mastered what should run first yesterday. Today you understand how React actually runs in a friendly way


If I missed something or made a mistake, your contributions or feedback are more than welcome

Feel free to explore, fork, or open issues if you want something explained here. I’ll keep expanding this as I learn more ❤

THANK YOU !!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors