为何React useState不支持依赖数组？现有方案存重复渲染问题

TL;DR #

为什么useState()不提供类似这样的依赖数组参数：

const [state, setState] = useState<T>(initialState, [initialState]);

问题场景与现有方案痛点 #

在React开发中，常遇到这类场景：父组件传递初始数据给子编辑组件，子组件维护本地数据副本供用户编辑（支持保存/回退操作），同时需要响应父组件的外部数据变更（比如网络请求获取新数据）。

目前常用的实现方式是：

const [state, setState] = useState<T>(initialState);
useEffect(() => setState(initialState), [initialState]);

但这种方式会导致两次渲染：

1. 父组件数据变更触发子组件首次渲染，useEffect的更新任务被加入队列；
2. useEffect执行后触发第二次渲染，造成不必要的性能开销。

我自行实现了一个useMemoState Hook来解决这个问题，但感觉只是临时方案，想了解官方为什么不提供原生支持，或者有没有更优的解决方案？

（附自定义Hook代码：

import { DependencyList, Dispatch, SetStateAction, useRef, useState } from 'react';

interface MemoContext<S> {
    deps: DependencyList | undefined;
    state?: S
}

// 参考React源码的areHookInputsEqual实现
function areHookInputsEqual(a: DependencyList | undefined, b: DependencyList | undefined): boolean {
    if (!a) {
        console.error('Prev deps should not be null')
        return false;
    } else if (!b) {
        return false;
    }
    for (let i = 0; i < a.length && i < b.length; i++) {
        if (!Object.is(a[i], b[i])) {
            return false;
        }
    }
    return true;
}

export function useMemoState<S>(
    initialState: S | (() => S),
    deps?: DependencyList,
): [S, Dispatch<SetStateAction<S>>]  {

    function resetInitialState() {
        const s: S = typeof initialState === 'function' ? (initialState as any)() : initialState;
        ctx.state = s;
        ctx.deps = deps;
        return s;
    }

    const ctx = useRef<MemoContext<S>>({ deps: undefined, state: undefined }).current;
    // 仅用于保留React的渲染行为
    const [state, setState] = useState<S>(resetInitialState);

    if (!areHookInputsEqual(ctx.deps, deps)) {
        // 依赖变更时重置状态
        resetInitialState()
    }

    function dispatch(action: SetStateAction<S>) {
        setState(prevState => {
            const s: S = typeof action === 'function' ? (action as any)(prevState) : action;
            ctx.state = s;
            ctx.deps = deps;
            return s;
        })
    }

    return [ctx.state!, dispatch];
}

）

官方不提供该特性的原因 #

• Hook职责单一原则：React的设计思路是每个Hook只专注一件事。useState的核心职责是管理组件本地状态的初始化与更新，依赖数组的逻辑属于“监听依赖变化同步状态”，本就是useEffect这类Hook的范畴。给useState添加依赖数组，会模糊其职责边界，增加API复杂度。
• 语义冲突风险：useState的第一个参数是初始值，仅在组件首次挂载时生效。如果添加依赖数组，很容易让开发者误解为“每次依赖变更时，初始值函数都会重新执行”，这与useState的原有语义冲突。
• 复杂度与性能权衡：支持依赖数组意味着useState在渲染阶段要额外做依赖比对，会增加内部逻辑复杂度。React团队更倾向于让开发者通过组合现有Hook实现需求，而非扩展单一Hook的功能，这样API更简洁，也符合组合式编程的理念。

更优解决方案 #

方案1：使用useSyncExternalStore（React 18+） #

如果你的场景是同步外部数据源（比如父组件传递的props），可以使用useSyncExternalStore，它能在数据源变更时同步更新状态，且不会触发额外渲染：

import { useSyncExternalStore, useState } from 'react';

function useSyncState<T>(externalState: T) {
  const subscribe = () => () => {}; // 针对props场景无需实际订阅
  const getSnapshot = () => externalState;

  const latestExternalState = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
  const [localState, setLocalState] = useState(latestExternalState);

  // 外部状态变更时同步本地状态
  if (localState !== latestExternalState) {
    setLocalState(latestExternalState);
  }

  return [localState, setLocalState] as const;
}

使用方式：

const [formState, setFormState] = useSyncState(initialState);

方案2：优化现有useEffect方案 #

如果不想自定义Hook，可以优化现有方案，降低两次渲染的影响：

• 用useMemo缓存父组件传递的initialState，确保引用稳定；
• 若组件渲染开销不大，两次渲染的性能影响可忽略，React的批量更新机制也会在多数场景下合并更新。

方案3：使用useReducer管理复杂状态 #

对于需要清晰处理外部数据变更逻辑的场景，useReducer是更合适的选择：

import { useReducer, useEffect } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'SYNC_FROM_PARENT':
      return action.payload;
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    default:
      return state;
  }
};

function EditComponent({ initialData }) {
  const [state, dispatch] = useReducer(reducer, initialData);

  // 同步父组件数据变更
  useEffect(() => {
    dispatch({ type: 'SYNC_FROM_PARENT', payload: initialData });
  }, [initialData]);

  // 编辑逻辑
  const handleEdit = (field, value) => {
    dispatch({ type: 'UPDATE_FIELD', field, value });
  };

  return <div>{/* 编辑表单内容 */}</div>;
}

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