What is React Fiber? What is the main goal of React Fiber?

// Visualization of Fiber's work (simplified)
// Old React (Stack Reconciler):
// 1. Starts rendering
// 2. Can't stop until it finishes everything
// 3. Blocks the browser
 
// React Fiber (Fiber Reconciler):
// 1. Starts rendering
// 2. Can stop and yield time to the browser
// 3. Continues later
// 4. Doesn't block the browser

// Example of a problem Fiber solves
function HeavyComponent() {
  const [items, setItems] = useState([]);
  
  // Imagine this is a very heavy render
  const heavyRender = () => {
    const newItems = [];
    for (let i = 0; i < 10000; i++) {
      newItems.push({ id: i, value: `Item ${i}` });
    }
    setItems(newItems);
  };
  
  return (
    <div>
      <button onClick={heavyRender}>Create 10000 items</button>
      <div>
        {items.map(item => (
          <div key={item.id}>{item.value}</div>
        ))}
      </div>
    </div>
  );
}
 
// Without Fiber: button click blocks browser for several seconds
// With Fiber: rendering is&nbsp;split into parts, browser remains responsive

// Fiber distinguishes update types:
// 🔴 High priority: user input, animations
// 🟡 Normal priority: regular state updates
// 🟢 Low priority: background tasks, server data
 
function FiberPrioritization() {
  const [inputValue, setInputValue] = useState('');
  const [backgroundData, setBackgroundData] = useState([]);
  
  // User input - high priority
  const handleInputChange = (e) => {
    setInputValue(e.target.value); // Fiber processes this immediately
  };
  
  // Background data - low priority
  useEffect(() => {
    // Loading large volume of data
    fetchData().then(setBackgroundData); // Fiber can defer this
  }, []);
  
  return (
    <div>
      <input 
        value={inputValue} 
        onChange={handleInputChange}
        placeholder="Enter text..."
      />
      <div>
        {backgroundData.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

// Simplified example of Fiber's work
class FiberWorkLoop {
  // Fiber breaks work into units (units of work)
  performUnitOfWork() {
    // 1. Perform a small piece of work
    // 2. Check if browser has time
    if (shouldYield()) {
      // 3. If browser is busy - yield time to it
      return;
    }
    // 4. Continue work later
  }
}

// Without Fiber: blocking rendering
function BlockingRender() {
  const [count, setCount] = useState(0);
  
  const heavyOperation = () => {
    // This operation blocks the entire UI
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    setCount(result);
  };
  
  return (
    <div>
      <p>Counter: {count}</p>
      {/* Button click freezes UI for several seconds */}
      <button onClick={heavyOperation}>Heavy operation</button>
    </div>
  );
}
 
// With Fiber: non-blocking rendering
function NonBlockingRender() {
  const [count, setCount] = useState(0);
  
  const fiberOperation = () => {
    // Fiber breaks operation into parts
    // UI remains responsive
    setCount(prev => prev + 1);
  };
  
  return (
    <div>
      <p>Counter: {count}</p>
      {/* UI remains responsive even with frequent updates */}
      <button onClick={fiberOperation}>Operation with Fiber</button>
    </div>
  );
}

// Fiber allows smooth handling of animations
function SmoothAnimation() {
  const [position, setPosition] = useState(0);
  
  // Animation will be smooth even with background updates
  useEffect(() => {
    const interval = setInterval(() => {
      setPosition(prev => (prev + 1) % 100);
    }, 16); // 60 FPS
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div style={{ 
      transform: `translateX(${position}px)`,
      transition: 'transform 0.1s linear'
    }}>
      Smooth movement! 🚀
    </div>
  );
}

// ❌ Misconception: Fiber automatically speeds up everything
// ✅ Reality: Fiber makes rendering interruptible
 
// Fiber doesn't reduce the amount of work, but makes it interruptible
// Total rendering time may even be longer!

// ❌ Fiber doesn't change React API
// Developers don't interact with Fiber directly
 
// ✅ Fiber - internal implementation
// Everything remains the same for developers