Next.js14+React18环境下强制更新组件：更优方案与方法验证

版本信息 #

• Next.js : 14.0.3
• React : 18.0.2

TestClientComponent.tsx #

// TestClientComponent.tsx
"use client";
import { IResident } from "@interface/resident.types";
import { getResidents } from "@models/resident.service";
import { SolidButton } from "mds/desktop";
import React, { use, useEffect, useState } from "react";

const TestClientComponent = () => {
  const [, forceUpdate] = useState<number>(0);

  const limit = Math.floor(Math.random() * 20);
  const response = use(
    getResidents({
      offset: 0,
      limit: limit,
    })
  );

  return (
    <div>
      <h1>Test Client Component</h1>
      {response.data.map((resident: IResident) => {
        return <div key={resident.id}>{resident.name}</div>;
      })}
      <div>
        <SolidButton
          $inline
          $size="full"
          type="button"
          onClick={() => forceUpdate((n) => n + 1)}
        >
          업데이트
        </SolidButton>
      </div>
    </div>
  );
};

export default TestClientComponent;

Main.tsx #

// Main.tsx

// ...
            <Suspense
              fallback={Array.from({ length: 3 }, (_, index) => index).map(
                (_, index) => (
                  <Skeleton key={index} height="62px" spacing={4} />
                )
              )}
            >
              <TestClientComponent />
            </Suspense>
// ...

解答内容 #

更优的强制重渲染方案 #

结合你的技术栈，有两种比当前方式更优雅的实现：

1. 将limit设为状态变量
   你当前的随机limit是渲染时临时生成的，把它转为状态变量，点击按钮时直接更新limit，既触发重渲染又让逻辑更清晰，完全符合React状态驱动渲染的设计：

   const TestClientComponent = () => {
     const [limit, setLimit] = useState(Math.floor(Math.random() * 20));
   
     const response = use(
       getResidents({
         offset: 0,
         limit: limit,
       })
     );
   
     return (
       <div>
         {/* 原有内容 */}
         <SolidButton
           $inline
           $size="full"
           type="button"
           onClick={() => setLimit(Math.floor(Math.random() * 20))}
         >
           업데이트
         </SolidButton>
       </div>
     );
   };
   

2. 用useReducer实现语义化的forceUpdate
   如果需要通用的强制更新工具，useReducer比匿名useState更具语义性：

   const TestClientComponent = () => {
     const [, forceUpdate] = useReducer(x => x + 1, 0);
   
     // 原有逻辑...
   };
   

   这种写法明确表达了“触发更新”的意图，比无意义的数字状态变量更易读。

当前方法的正确性 #

你现在用useState实现的forceUpdate是完全正确的，这是React社区认可的应急强制重渲染手段。它通过更新状态触发组件重新渲染，完全遵循React的渲染机制，不会产生副作用，只是在语义化和可读性上不如上述两种方案。

内容的提问来源于stack exchange，提问作者조민규