如何在未使用Hook返回值时阻止React组件重渲染？

问题描述 #

当组件使用的Hook内部存在状态更新，但该状态并不影响组件自身的UI或业务逻辑时，组件仍会被触发重渲染。比如下面的示例中，useNothing Hook内部每2秒更新一次状态，即使组件UI完全不变，控制台的渲染计数仍会每2秒递增：

import { useState, useEffect, memo } from "react";
import "./styles.css";

let renderCount = 0;

function useNothing() {
  const [nothing, setNothing] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setNothing((v) => v + 1);
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  }, []);
}

function App() {
  useNothing();

  console.log(++renderCount);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Check the console</h2>
    </div>
  );
}

export default memo(App);

实际场景中，比如使用react-hook-form时，需要监听输入字段变化，但只想在字段的特定属性改变时才让组件重渲染，而非字段的任何变化都触发重渲染。

原因分析 #

React的重渲染触发逻辑是：只要组件内部（包括其调用的Hook）的状态发生更新，就会触发组件重渲染。memo只能阻止因props变化导致的不必要重渲染，无法拦截内部状态更新引发的重渲染。

解决方案 #

1. 自定义Hook：用useRef替代useState存储无关UI的状态

如果Hook内部的状态不需要驱动组件UI，完全可以用useRef来存储——useRef的更新不会触发组件重渲染。修改上述示例的useNothing：

import { useEffect, memo, useRef } from "react";
import "./styles.css";

let renderCount = 0;

function useNothing() {
  const nothingRef = useRef(0); // 用useRef替代useState

  useEffect(() => {
    const interval = setInterval(() => {
      nothingRef.current += 1; // 更新ref值，不会触发组件重渲染
      console.log("Hook内部计数器:", nothingRef.current);
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  }, []);
}

function App() {
  useNothing();

  console.log(++renderCount);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Check the console</h2>
    </div>
  );
}

export default memo(App);

修改后，组件只会渲染一次，Hook内部的计数器更新不会触发组件重渲染。

2. react-hook-form场景：精准监听特定属性

使用react-hook-form的useWatch方法，指定要监听的字段和属性，只有当目标属性变化时才触发组件重渲染。示例如下：

import { useForm, useWatch, register } from "react-hook-form";
import { memo } from "react";

const FormComponent = memo(() => {
  const { control } = useForm({
    defaultValues: { username: "" }
  });

  // 仅监听username字段的value属性，只有该值变化时才触发重渲染
  const usernameValue = useWatch({
    control,
    name: "username",
    defaultValue: ""
  });

  console.log("组件重渲染:", usernameValue);

  return (
    <input
      {...register("username")}
      placeholder="请输入用户名"
    />
  );
});

这种方式可以精准控制重渲染的触发时机，避免不必要的性能消耗。

核心思路 #

避免让Hook内部的非UI相关状态触发组件重渲染：

• 对于自定义Hook，用useRef存储不需要驱动UI的状态；
• 对于第三方库场景，使用库提供的精准监听API，只监听影响UI的属性变化。

内容的提问来源于stack exchange，提问作者c.bear