Concurrent Mode機能：startTransition・useDeferredValue

// packages/react-reconciler/src/ReactFiberLane.js（簡略）
export const SyncLane            = 0b0000000000000000000000000000001; // 最高
export const InputContinuousLane = 0b0000000000000000000000000000100;
export const DefaultLane         = 0b0000000000000000000000000010000;
export const TransitionLane1     = 0b0000000000000000000000001000000; // startTransition
export const IdleLane            = 0b0100000000000000000000000000000; // 最低

import { useState, startTransition } from 'react';

function SearchPage() {
  const [inputValue, setInputValue] = useState('');  // 緊急
  const [searchQuery, setSearchQuery] = useState(''); // 非緊急
  
  function handleChange(e) {
    // 入力値の更新は緊急（即座に反映）
    setInputValue(e.target.value);
    
    // 検索結果の更新は非緊急（遅れてもOK）
    startTransition(() => {
      setSearchQuery(e.target.value);
    });
  }
  
  return (
    <>
      <input value={inputValue} onChange={handleChange} />
      {/* searchQueryが変わったときだけリストが重い処理をする */}
      <SearchResults query={searchQuery} />
    </>
  );
}

// packages/react/src/ReactStartTransition.js（概略）
export function startTransition(scope) {
  const prevTransition = ReactCurrentBatchConfig.transition;
  // トランジションフラグを立てる
  ReactCurrentBatchConfig.transition = {};
  
  try {
    scope(); // この中のsetStateはTransitionLaneに割り当てられる
  } finally {
    ReactCurrentBatchConfig.transition = prevTransition;
  }
}

// scheduleUpdateOnFiber内でLane決定
function requestUpdateLane(fiber) {
  if (isInsideTransition()) {
    return claimNextTransitionLane(); // TransitionLane1~15のいずれか
  }
  // ... 通常はSyncLaneかDefaultLane
}

import { useState, useTransition } from 'react';

function SearchPage() {
  const [isPending, startTransition] = useTransition();
  const [inputValue, setInputValue] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  
  function handleChange(e) {
    setInputValue(e.target.value);
    startTransition(() => {
      setSearchQuery(e.target.value);
    });
  }
  
  return (
    <>
      <input value={inputValue} onChange={handleChange} />
      
      {/* isPendingはTransition処理中にtrueになる */}
      {isPending && (
        <div class="loading-spinner">検索中...</div>
      )}
      
      <SearchResults query={searchQuery} />
    </>
  );
}

import { useState, useDeferredValue, memo } from 'react';

// memoで囲むことで、deferredQueryが変わったときだけ再レンダリング
const SearchResults = memo(function SearchResults({ query }) {
  // 重いフィルタリング処理
  const results = heavyFilter(allItems, query);
  return <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
});

function SearchPage() {
  const [query, setQuery] = useState('');
  
  // deferredQueryはqueryの「遅延バージョン」
  // 新しいqueryが来ても、deferredQueryは前の値を保持し続ける
  const deferredQuery = useDeferredValue(query);
  
  // queryとdeferredQueryが違う = 遅延中
  const isStale = query !== deferredQuery;
  
  return (
    <>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      {/* deferredQueryが変わったときだけSearchResultsを更新 */}
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <SearchResults query={deferredQuery} />
      </div>
    </>
  );
}