Motivation Behind React Fiber: Time Slicing & Suspense

Series: How React Works Under the Hood

Level: Intermediate to Advanced

Prerequisites: Basic React knowledge. Bonus: if you've read How JavaScript Works — you'll feel right at home.

Introduction

You've used React. You've felt that lag — the input that stutters, the page that freezes for half a second, the animation that just doesn't feel right. But have you ever wondered why React had to completely rewrite its entire internal engine just to fix it?

In 2017, the React team announced React Fiber — a ground-up rewrite of React's internals. Not the API. Your JSX and components stayed the same. But the engine underneath, the thing that actually decides how and when work gets done, was thrown out and rebuilt from scratch.

To understand why Fiber was necessary — not just useful, but necessary — we need to start where the React team started. This entire article is grounded in Dan Abramov's talk at JSConf Iceland 2018.…