8000 行表格全塞进 useState 输入一次卡 1.2 秒

const all = useRef([]);
const [pageRows, setPageRows] = useState([]);
const visible = useMemo(() => slice(all.current, page), [page]);

8000 行数据全放进 useState，输入框每按一个键卡 1.2 秒，React DevTools 显示单次 render 900ms。这类现象通常不是突然出现的，往前翻半天日志能看到苗头。

追下去是这么回事：每次按键都触发整个数组的浅比较和列表重算，虽然屏幕上只有 20 行。原始数据不需要响应式，放进 state 反而成了负担。

「大数组 state 性能」确认了原因之后，改动尽量只碰那一处，顺手改的东西后面最容易出问题。权限不要一口气开到最大，先加到够用再往上试，范围小才好收。

把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。改动写完就同步给同事，下一个人踩同一个坑，成本还是你的。

验证用真实数据走一遍，测试数据太干净，边界情况根本碰不到。

处理上按这个顺序：原始数据放 useRef 或模块级变量 不进 state；只把当前页 20 行放进 state；过滤排序用 useMemo 并加防抖；输入十个字符 对比优化前后的 render 耗时。

确认没问题再收工，输入时单次 render 降到 50ms 以内，翻页仍能取到完整 8000 行。