React组件周期性API调用致性能问题，求按需重渲染方案

我创建了一个由组件组成的表格，每行对应一个组件，每个组件每5秒单独调用Express后端API。但运行约5分钟后出现性能问题，因为API响应结果几乎不变，组件却每5秒重渲染一次。希望实现仅当响应结果变化时才重渲染组件。

TmfComponent 组件代码 #

import {useEffect, useState} from "react";
import { Td } from "../styled/components";
import axios from 'axios';

function TmfComponent({url, name}) {

    const [status, setStatus] = useState(null);
    const [cacheStatus, setCacheStatus] = useState(null);
    const [appStatus, setAppStatus] = useState(null);
    const [loading, setLoading] = useState(true);
    const [state, setState] = useState(false);

    console.log("I am rendered again!");

    useEffect(function () {
        const intervalCall = setInterval(() => {
            setState(!state);
            console.log("State is changed");
        }, 5000);
        return () => clearInterval(intervalCall);
    }, [state]);

    function getData() {
        axios.post("http://localhost:8000/health", {
            url, name
        }, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then((response) => {
            if (loading) {
                setLoading(false);
            }
            if (response.data.appStatus !== appStatus) {
                setAppStatus(response.data.appStatus);
            }
            if (response.data.status !== status) {
                setStatus(response.data.status);
            }
            if (response.data.cacheStatus !== cacheStatus) {
                setCacheStatus(response.data.cacheStatus);
            }
        }).catch((error) => {
            console.error(error);
            setAppStatus("Failed");
            setCacheStatus("Failed");
            setStatus("Failed");
        })
    }

    useEffect(function () {
        getData();
    }, [state]);

    const appStatusStyle = {
        backgroundColor: appStatus != null ? (appStatus === "UP" || appStatus === "Healthy" ? "#03DAC6" : "#ff0266") : "#ffeeee"
    };

    const overallStatusStyle = {
        backgroundColor: status != null ? (status === "UP" || status === "Healthy" ? "#03DAC6" : "#ff0266") : "#ffeeee"
    };

    const cacheStatusStyle = {
        backgroundColor: cacheStatus != null ? (cacheStatus === "UP" || cacheStatus === "Healthy" ? "#03DAC6" : "#ff0266") : "#ffeeee"
    };


    return <tr>
        <Td>{name}</Td>
        <Td style={appStatusStyle}> {loading ? "Loading..." : (appStatus ?? "N/A")} </Td>
        <Td style={cacheStatusStyle}> {loading ? "Loading..." : (cacheStatus ?? "N/A")}</Td>
        <Td style={overallStatusStyle}> {loading ? "Loading..." : (status ?? "N/A")}</Td>
    </tr>
}
export default TmfComponent;

TmfComponentList 表格代码 #

import TmfComponent from "./TmfComponent";
import shortid from 'shortid';
import PageLoader from "./PageLoader";

export default function  TmfComponentList({tmfRequests}) {

    let displayComponent;
    if (tmfRequests.length > 0) {
        displayComponent = tmfRequests.map((component) => <TmfComponent key={shortid.generate()} name={component.name} url={component.url}/>);
        return <div>
            <table style={{width: "100%"}}>
                <thead>
                    <tr>
                        <th>API Name</th>
                        <th>App Status</th>
                        <th>Cache Status</th>
                        <th>Overall Status</th>
                    </tr>
                </thead>
                <tbody>
                    {displayComponent}
                </tbody>
            </table>
        </div>
    } else {
        return <div>
            <PageLoader />
        </div>
    }
}

注意：曾尝试用空依赖的useEffect设置定时器，但仍有性能问题。

1. 修复定时器的错误实现 #

你当前的定时器依赖state，导致每次state变化都会重新创建新的定时器，引发不必要的组件更新和内存泄漏风险。正确做法是用空依赖的useEffect初始化定时器，直接在定时器中调用getData：

修改TmfComponent中的定时器逻辑：

// 移除原来的state变量和依赖state的useEffect
// const [state, setState] = useState(false);

useEffect(function () {
    // 初始化时立即调用一次
    getData();
    // 设置5秒间隔的定时器
    const intervalCall = setInterval(() => getData(), 5000);
    return () => clearInterval(intervalCall);
}, [url, name]); // 依赖url和name，确保当props变化时重新创建定时器

2. 使用React.memo阻止不必要的重渲染 #

TmfComponent的url和name props如果不变，即使父组件重渲染，该组件也不需要更新。用React.memo包裹组件，实现浅比较props，避免无意义的重渲染：

import { useEffect, useState, memo } from "react";

// ... 组件内部代码 ...

export default memo(TmfComponent);

3. 修复列表key的致命问题 #

当前用shortid.generate()作为组件key，每次渲染都会生成新key，导致React销毁并重新创建所有TmfComponent实例，这是性能问题的核心原因之一。改用组件的唯一标识作为key（比如name或url，确保唯一）：

修改TmfComponentList中的map逻辑：

displayComponent = tmfRequests.map((component) => 
    <TmfComponent key={component.name} name={component.name} url={component.url}/>
);

如果name不唯一，可以用component.url或者组合name+url作为key。

4. 优化状态更新逻辑（可选） #

将分散的状态合并为一个对象，减少state变量数量，同时确保只有当数据真正变化时才更新：

// 替换原来的三个状态变量
const [healthData, setHealthData] = useState({
    appStatus: null,
    cacheStatus: null,
    status: null
});
const [loading, setLoading] = useState(true);

// 修改getData中的状态更新逻辑
function getData() {
    axios.post("http://localhost:8000/health", { url, name }, {
        headers: { 'Content-Type': 'application/json' }
    }).then((response) => {
        const newData = {
            appStatus: response.data.appStatus,
            cacheStatus: response.data.cacheStatus,
            status: response.data.status
        };
        // 浅比较新旧数据，只有变化时才更新
        if (JSON.stringify(newData) !== JSON.stringify(healthData)) {
            setHealthData(newData);
        }
        if (loading) setLoading(false);
    }).catch((error) => {
        console.error(error);
        const failedData = {
            appStatus: "Failed",
            cacheStatus: "Failed",
            status: "Failed"
        };
        if (JSON.stringify(failedData) !== JSON.stringify(healthData)) {
            setHealthData(failedData);
        }
        if (loading) setLoading(false);
    });
}

注意：如果数据结构复杂，JSON.stringify可能不是最优选择，可以手动比较每个字段。

5. 合并API请求（后端支持时推荐） #

如果后端可以修改，建议提供一个批量接口，一次性获取所有组件的健康状态，减少前端请求数量。比如前端发送tmfRequests数组，后端返回所有组件的状态，这样只需要一个定时器，一次请求就能更新所有行的状态，大幅提升性能。

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