合并状态优化组件重渲染：此重构能否提升React组件性能？

我在页面组件的多个useEffect钩子中设置了15个状态，这导致所有子组件多次重渲染，考虑合并部分状态。原代码示例如下：

const MyComponent = () => {

    const [state1, setState1] = useState(null);
    const [state2, setState2] = useState(null);
    const [state3, setState3] = useState(null);
    const [state4, setState4] = useState(null);
    const [state5, setState5] = useState(null);
    const [state6, setState6] = useState(null);
    const [state7, setState7] = useState(null);
    const [state8, setState8] = useState(null);

    useEffect(() => {
        const {value1, value2, value3, value4} = externalSynchronousFunction1();
        setState1(value1);
        setState2(value2);
        setState3(value3);
        setState4(value4);
    }, []);

    useEffect(() => {
        if (value1 && value2) {
            const {value5, value6, value7, value8} = externalSynchronousFunction2();
            setState5(value5);
            setState6(value6);
            setState7(value7);
            setState8(value8);
        }
    }, [value1, value2]);
}

已知这些状态后续不会再更新，请问这种合并状态的重构能否提升组件性能？

结论：这种重构能显著提升性能 #

核心原因： #

• 大幅减少重渲染次数：React中每次调用setState都会触发组件重渲染。原代码里第一个useEffect调用4次单个状态的setter，会触发4次父组件重渲染；第二个useEffect的4次setter又会触发4次。合并状态后，每次只需调用一次setter就能更新一组关联值，直接把8次重渲染降到2次，从根源减少子组件的不必要重复渲染。
• 无后续维护负担：因为这些状态后续不会再更新，合并后不需要处理复杂的局部更新逻辑，反而能让状态的关联关系更清晰，代码更简洁。

重构示例： #

把关联状态合并为对象，一次性完成更新：

const MyComponent = () => {
    // 合并第一组关联状态
    const [group1, setGroup1] = useState({
        value1: null,
        value2: null,
        value3: null,
        value4: null
    });
    // 合并第二组关联状态
    const [group2, setGroup2] = useState({
        value5: null,
        value6: null,
        value7: null,
        value8: null
    });

    useEffect(() => {
        const {value1, value2, value3, value4} = externalSynchronousFunction1();
        // 一次性更新整组状态
        setGroup1({ value1, value2, value3, value4 });
    }, []);

    useEffect(() => {
        const { value1, value2 } = group1;
        if (value1 && value2) {
            const {value5, value6, value7, value8} = externalSynchronousFunction2();
            // 一次性更新第二组状态
            setGroup2({ value5, value6, value7, value8 });
        }
    }, [group1.value1, group1.value2]);
}

额外优化建议： #

如果子组件依赖这些状态中的部分值，建议用React.memo包裹子组件，进一步避免子组件因父组件重渲染产生无意义更新——不过因为这些状态后续不会变化，即使不做memo优化，后续也不会有多余渲染，仅初始渲染阶段的性能收益已经足够明显。

内容的提问来源于stack exchange，提问作者camille