React Fiber — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— React Fiber
📋Fiber
⚙️Transitions
🔄Deferred
✅Concurrent
🎯 Next: Test →
Step 1 / 4
Speed
Fiber Architecture
Fiber splits render into interruptible units of work💡 Analogy
Like a chef who can pause preparing a complex dish to answer a quick customer question — then resume where they left off.
React Fiber replaced the synchronous recursive render with an asynchronous interruptible scheduler. This enables React to pause work, prioritize urgent updates, and resume later.
Console Output
> React 18 Concurrent Mode enabled
> Fiber scheduler: work units ready
> High-priority (user input): immediate
> Low-priority (data fetch): deferrable
●fiber-demo.tsx
Fiber ArchitectureL1–2
1import { useState, useTransition, useDeferredValue, Suspense } from 'react';
2 
3// useTransition — mark expensive state updates as non-urgent
4function SearchPage() {
5  const [query, setQuery] = useState('');
6  const [results, setResults] = useState<string[]>([]);
7  const [isPending, startTransition] = useTransition();
8 
9  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
10    const value = e.target.value;
11    setQuery(value);   // urgent: update input immediately
12 
13    startTransition(() => {
14      // non-urgent: can be interrupted by urgent updates
15      setResults(expensiveFilter(value));
16    });
17  }
18 
19  return (
20    <div>
21      <input value={query} onChange={handleSearch} placeholder="Search..." />
22      {isPending && <Spinner />}
23      <ResultsList results={results} />
24    </div>
25  );
26}
27 
28// useDeferredValue — defer re-rendering an expensive component
29function SlowList({ query }: { query: string }) {
30  const deferredQuery = useDeferredValue(query);
31  // SlowList renders with deferredQuery which lags behind the actual query
32  // Input stays responsive; list updates when browser is idle
33  return <BigTable query={deferredQuery} isStale={deferredQuery !== query} />;
34}
35 
36// Concurrent rendering with Suspense
37function App() {
38  return (
39    <Suspense fallback={<LoadingSpinner />}>
40      <UserData />    {/* async Server Component or lazy-loaded CC */}
41    </Suspense>
42  );
43}
44 
45// React 18 automatic batching — multiple setState in one render
46function MultiUpdate() {
47  const [count, setCount] = useState(0);
48  const [flag, setFlag] = useState(false);
49 
50  function handleClick() {
51    // React 18: both setState calls batched into ONE re-render
52    // React 17: would cause TWO re-renders
53    setCount(c => c + 1);
54    setFlag(f => !f);
55  }
56  return <button onClick={handleClick}>Update Both</button>;
57}
58 
59function expensiveFilter(q: string) { return []; }
60declare const Spinner: any, ResultsList: any, BigTable: any, LoadingSpinner: any, UserData: any;
60 lines
Timeline — 4 Steps
Fiber Architecture
Fiber splits render into interruptible units of work💡 Analogy
Like a chef who can pause preparing a complex dish to answer a quick customer question — then resume where they left off.
React Fiber replaced the synchronous recursive render with an asynchronous interruptible scheduler. This enables React to pause work, prioritize urgent updates, and resume later.
Console Output
> React 18 Concurrent Mode enabled
> Fiber scheduler: work units ready
> High-priority (user input): immediate
> Low-priority (data fetch): deferrable

Was this page helpful?

Discussion

Fiber splits render into interruptible units of work

💡 Analogy

Like a chef who can pause preparing a complex dish to answer a quick customer question — then resume where they left off.

React Fiber replaced the synchronous recursive render with an asynchronous interruptible scheduler. This enables React to pause work, prioritize urgent updates, and resume later.

Console Output

> React 18 Concurrent Mode enabled
> Fiber scheduler: work units ready
> High-priority (user input): immediate
> Low-priority (data fetch): deferrable

Fiber splits render into interruptible units of work

💡 Analogy

Like a chef who can pause preparing a complex dish to answer a quick customer question — then resume where they left off.

React Fiber replaced the synchronous recursive render with an asynchronous interruptible scheduler. This enables React to pause work, prioritize urgent updates, and resume later.

Console Output

> React 18 Concurrent Mode enabled
> Fiber scheduler: work units ready
> High-priority (user input): immediate
> Low-priority (data fetch): deferrable