The Idea That Makes Suspense Possible

Series: How React Works Under the Hood

Part 1: Motivation Behind React Fiber: Time Slicing & Suspense

Part 2: Why React Had to Build Its Own Execution Engine

Part 3: How React Finds What Actually Changed

Prerequisites: Read Parts 1–3 first.

A Question Before We Start

Think about how you fetch data in a React component today. You probably do something like this:

function UserProfile ({ id }) { const [ user , setUser ] = useState ( null ); const [ loading , setLoading ] = useState ( true );

useEffect (() => { fetchUser ( id ). then ( data => { setUser ( data ); setLoading ( false ); }); }, [ id ]);

if ( loading ) return < Spinner />; return < div > { user . name } </ div >; }

Enter fullscreen mode

Exit fullscreen mode

It works.…