如何在不改变组件行为的前提下移除React中的useEffect？

React v18中有个趋势——开发者应尽可能移除useEffect。官方文档明确说明：Effect用于让组件与外部系统（比如聊天服务）保持同步，外部系统指任何不受React控制的代码片段。但很多场景下，开发者很难找到既能移除useEffect、又不破坏组件功能或导致代码冗余的方法，比如下面这个案例：

import { useEffect, useState } from "react";

interface SearchBarProps {
  programType: "movies" | "series";
}

export function SearchBar({ programType }: SearchBarProps): JSX.Element {
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [selectedYear, setSelectedYear] = useState<number | null>();
  const [counter, setCounter] = useState<number>(0);

  /* 
  当programType属性变化时重置searchTerm和selectedYear
  */
  useEffect(() => {
    searchTerm != "" && setSearchTerm("");
    typeof selectedYear == "number" && setSelectedYear(null);
  }, [programType]);

  const increase = () => {
    setCounter(counter => counter + 1);
  };

  return (
    <div className="search-bar">
      <p>{searchTerm}</p>
      <p>{selectedYear}</p>
      <span className="counter__output">{counter}</span>
      <div className="btn__container">
        <button onClick={increase}>+</button>
      </div>
    </div>
  );
}

这个案例里的useEffect用来在props变化时重置内部状态，属于React内部的状态同步，并非与外部系统交互，所以完全可以用更符合React设计思路的方式替代，以下是两种可行方案：

方案一：利用组件key机制重置状态 #

把需要重置的状态封装到独立子组件中，父组件将programType作为子组件的key属性。当programType变化时，React会认为这是一个全新的子组件，会卸载旧组件并挂载新组件，子组件的内部状态会自动回到初始值，无需useEffect。

代码示例：

import { useState } from "react";

interface SearchBarProps {
  programType: "movies" | "series";
}

// 封装搜索相关状态的子组件
function SearchControls() {
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [selectedYear, setSelectedYear] = useState<number | null>();

  return (
    <>
      <p>{searchTerm}</p>
      <p>{selectedYear}</p>
    </>
  );
}

export function SearchBar({ programType }: SearchBarProps): JSX.Element {
  const [counter, setCounter] = useState<number>(0);

  const increase = () => {
    setCounter(counter => counter + 1);
  };

  return (
    <div className="search-bar">
      {/* 通过key让programType变化时重新挂载子组件，自动重置状态 */}
      <SearchControls key={programType} />
      <span className="counter__output">{counter}</span>
      <div className="btn__container">
        <button onClick={increase}>+</button>
      </div>
    </div>
  );
}

方案二：使用useReducer管理状态并在渲染时触发重置 #

如果状态逻辑更复杂，可通过useReducer集中管理状态变化，同时用useRef跟踪上一次的programType，在渲染阶段检查到programType变化时，直接触发重置动作。这种方式避免了useEffect的使用，且状态逻辑更清晰。

代码示例：

import { useReducer, useState, useRef } from "react";

interface SearchBarProps {
  programType: "movies" | "series";
}

// 定义搜索状态结构
type SearchState = {
  searchTerm: string;
  selectedYear: number | null;
};

// 定义状态操作类型
type SearchAction = 
  | { type: 'SET_SEARCH_TERM', payload: string }
  | { type: 'SET_SELECTED_YEAR', payload: number | null }
  | { type: 'RESET' };

// 初始搜索状态
const initialSearchState: SearchState = {
  searchTerm: "",
  selectedYear: null,
};

// 状态处理函数
function searchReducer(state: SearchState, action: SearchAction): SearchState {
  switch (action.type) {
    case 'SET_SEARCH_TERM':
      return { ...state, searchTerm: action.payload };
    case 'SET_SELECTED_YEAR':
      return { ...state, selectedYear: action.payload };
    case 'RESET':
      return initialSearchState;
    default:
      return state;
  }
}

export function SearchBar({ programType }: SearchBarProps): JSX.Element {
  const [counter, setCounter] = useState<number>(0);
  const [searchState, dispatch] = useReducer(searchReducer, initialSearchState);
  const prevProgramType = useRef(programType);

  // 渲染时检查programType是否变化，变化则重置状态
  if (prevProgramType.current !== programType) {
    dispatch({ type: 'RESET' });
    prevProgramType.current = programType;
  }

  const increase = () => {
    setCounter(counter => counter + 1);
  };

  return (
    <div className="search-bar">
      <p>{searchState.searchTerm}</p>
      <p>{searchState.selectedYear}</p>
      <span className="counter__output">{counter}</span>
      <div className="btn__container">
        <button onClick={increase}>+</button>
      </div>
    </div>
  );
}

这两种方案都能完全替代原useEffect的功能，且符合React官方的设计理念——内部状态的同步尽量通过组件生命周期或状态管理工具实现，useEffect则留给真正需要和外部系统交互的场景。

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