JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

React

import React, { useState, useTransition } from 'react';

function App() {
  // High-priority state: user interactions
  const [count, setCount] = useState(0);
  
  // Low-priority state: background task
  const [isLoading, setIsLoading] = useState(false);
  
  // StartTransition allows us to set lower priority for updates
  const [startTransition, isPending] = useTransition();

  // Handle the high-priority update (user click)
  const handleIncrement = () => {
    setCount(count + 1);
  };

  // Simulate a slow background task using setTimeout
  const handleLoadData = () => {
    // Set to simulate a slow background task (low priority)
    startTransition(() => {
      setIsLoading(true);
      setTimeout(() => {
        // Simulate a slow task (like fetching data)
        setIsLoading(false);
        console.log("Data loaded!");
      }, 3000); // Simulate a slow background task (3 seconds)
    });
  };

  return (
    <div>
      <h1>Concurrent Rendering Demo</h1>
      
      <div>
        <h2>High-priority Task: User Click</h2>
        <button onClick={handleIncrement}>Increment Count ({count})</button>
      </div>
      
      <div>
        <h2>Low-priority Task: Simulate Data Load</h2>
        <button onClick={handleLoadData}>Load Data (Slow)</button>
        {isLoading && <p>Loading data...</p>}
        {isPending && <p>Transition in progress...</p>}
      </div>

      <div>
        <h3>Concurrent Rendering Simulation:</h3>
        <p>
          Click "Increment Count" rapidly to simulate a high-priority user
          interaction while the background data load is in progress. React will
          prioritize the increment clicks over the data loading.
        </p>
      </div>
    </div>
  );
}

export default App;