如何避免React登录页面中非必要的组件重渲染？

你遇到的核心问题是：操作NeedHelpComponent的折叠/展开时，父组件SignIn和SignInFormComponent会跟着不必要重渲染。根源在于showHelp状态定义在SignIn组件中，状态变化会触发父组件重渲染，进而带动所有子组件重渲染——即使子组件的props没有变化。

下面是两种针对性的解决方案：

方案一：将showHelp状态下移到NeedHelpComponent内部（推荐） #

既然只有NeedHelpComponent需要用到showHelp状态，完全没必要把它提升到父组件中。把状态移到组件内部后，操作折叠/展开只会触发自身重渲染，父组件和SignInFormComponent都不会受影响。

修改后的NeedHelpComponent代码：

import { useState } from 'react';
import { CaretDownFill, CaretRightFill } from '@react-icons/all-files/bs/CaretDownFill';
import { Link } from 'react-router-dom';

const NeedHelpComponent = () => {
    const [showHelp, setShowHelp] = useState(false);
    console.log("Need Help Component re-renders...");

    const handleShowHideHelp = () => {
        setShowHelp(prev => !prev);
    };

    return (
        <div className="ps-5 mt-3">
            {showHelp ? (
                <CaretDownFill size={15} color="#3E0957" />
            ) : (
                <CaretRightFill size={15} color="#3E0957" />
            )}
            &nbsp;
            <Link className="fs-11" onClick={handleShowHideHelp}>
                Need help?
            </Link>
            {showHelp ? (
                <div>
                    <Link className="fs-11 ps-4" to="/forgotpassword">
                        Forgot your password
                    </Link>
                </div>
            ) : (
                <></>
            )}
        </div>
    )
}

export default React.memo(NeedHelpComponent)

同时在SignIn组件中，移除showHelp状态和memoHandleShowHideHelp，直接使用<NeedHelpComponent />即可。

方案二：优化父组件的回调函数与props稳定性 #

如果必须在父组件持有showHelp状态，需要确保SignInFormComponent的props完全稳定，让React.memo能正确判断是否需要重渲染：

1. 修正memoHandleLoginError的依赖数组：
   handleLoginError内部只用到useState返回的更新函数setShowLoginErrMessage，这个函数的引用是天生稳定的，不需要依赖loginErrMessage。修改为：

const memoHandleLoginError = useCallback((loginError) => {
    setShowLoginErrMessage(loginError);
}, []);

2. 优化handleShowHideHelp的实现：
   使用函数式更新，避免直接依赖showHelp状态，让useCallback的依赖数组为空：

const memoHandleShowHideHelp = useCallback(() => {
    setShowHelp(prev => !prev);
}, []);

修改后的SignIn组件核心代码：

export default function SignIn() {
  const [loginErrMessage, setShowLoginErrMessage] = useState(null);
  const [showHelp, setShowHelp] = useState(false);

  const memoHandleShowHideHelp = useCallback(() => {
    setShowHelp(prev => !prev);
  }, []);

  const memoHandleLoginError = useCallback((loginError) => {
    setShowLoginErrMessage(loginError);
  }, []);

  // 其余JSX代码保持不变
}

这样，当showHelp变化时，SignInFormComponent的两个props（loginErrMessage和memoHandleLoginError）都不会改变，React.memo就会阻止它进行不必要的重渲染。

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