flushSync

import { flushSync } from 'react-dom';

function flushSync<R>(fn: () => R): R

import { flushSync } from 'react-dom';
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // ❌ 普通更新 - 异步批处理
    setCount(count + 1);
    console.log(count); // 仍然是旧值: 0

    // ✅ 使用 flushSync - 同步更新
    flushSync(() => {
      setCount(c => c + 1);
    });
    console.log(count); // 新值: 1
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  );
}

import { flushSync } from 'react-dom';
import { useState, useRef } from 'react';

function MeasureExample() {
  const [width, setWidth] = useState(0);
  const divRef = useRef<HTMLDivElement>(null);

  const expandAndMeasure = () => {
    // ❌ 错误: DOM 还未更新
    setWidth(300);
    console.log(divRef.current?.offsetWidth); // 旧值

    // ✅ 正确: 使用 flushSync
    flushSync(() => {
      setWidth(300);
    });

    // 现在 DOM 已更新
    console.log(divRef.current?.offsetWidth); // 新值: 300
  };

  return (
    <div>
      <div
        ref={divRef}
        style={{ width: `${width}px`, transition: 'width 0.3s' }}
      >
        内容区域
      </div>
      <button onClick={expandAndMeasure}>
        展开并测量
      </button>
    </div>
  );
}

import { flushSync } from 'react-dom';
import { useState, useEffect, useRef } from 'react';
import * as d3 from 'd3';

function D3Chart({ data }: { data: number[] }) {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    // ✅ 确保 DOM 更新后再绘制 D3 图表
    flushSync(() => {
      // 这里不需要,因为我们已经在 useEffect 中
      // 但在某些情况下,可能需要强制同步
    });

    // 绘制 D3 图表
    const svg = d3.select(svgRef.current);
    svg
      .selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', (d, i) => i * 50)
      .attr('cy', d => d)
      .attr('r', 10);
  }, [data]);

  return <svg ref={svgRef} width={500} height={300} />;
}

// 使用场景:
// - D3.js 图表
// - Chart.js 图表
// - 测量 DOM 尺寸
// - 滚动到新元素
// - 与第三方动画库集成

// 使用 flushSync 前先检查:
// ✅ 真的需要立即获取 DOM 吗?
// ✅ 是否可以重构为异步?
// ✅ 是否可以用 useEffect 替代?
// ✅ 是否可以用 ref 替代?

// 常见合理使用场景:

// 1. DOM 测量
function measure() {
  flushSync(() => setState(1));
  const rect = element.getBoundingClientRect();
}

// 2. 滚动到新元素
function scroll() {
  flushSync(() => addItem(newItem));
  document.getElementById(newItem)?.scrollIntoView();
}

// 3. 第三方库集成(D3, Chart.js)
function drawChart() {
  flushSync(() => setData(chartData));
  d3.select(svg).selectAll('circle').data(data);
}

// 4. 同步打印/export
function print() {
  flushSync(() => setContent(printContent));
  window.print();
}

// 性能对比

// ❌ 差: 频繁使用 flushSync
function BadPerformance() {
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    // 每次输入都强制同步 - 非常慢!
    flushSync(() => {
      setValue(e.target.value);
    });
  };

  return <input value={value} onChange={handleChange} />;
}

// ✅ 好: 使用普通更新 + useEffect
function GoodPerformance() {
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    // 普通更新 - React 批处理优化
    setValue(e.target.value);
  };

  useEffect(() => {
    // DOM 更新后执行操作
    console.log('DOM updated:', value);
  }, [value]);

  return <input value={value} onChange={handleChange} />;
}

// 性能差异:
// - 普通: 批处理,每秒渲染 1-2 次
// - flushSync: 每次输入都渲染,每秒渲染数十次