React跨组件传递setState状态更新缓慢，求优化方案

我实现了一个带有可点击点位的热力图组件，点击点位后需要更新展示当日提交记录的列表组件，使其显示对应日期的内容。当前的实现是在父组件TeamMember中通过useState维护date状态及setDate方法：热力图组件CustomHeatmap接收setDate作为props，列表组件CommitByDayList接收date作为props。功能可以正常运行，但状态更新速度异常缓慢。

之前将date与setDate放在列表组件内部并配合FormControl使用时，完全没有延迟问题；但改为跨组件传递状态后出现卡顿，而业务需求要求必须通过热力图选择日期，不能使用表单控件。

相关组件代码如下：

热力图组件（CustomHeatmap） #

function Tile({ date, count, idx, setDate }) {
  return (
      <div
        onClick={() => {
          setDate(date);
        }}
      ></div>
  );
}

export default function CustomHeatmap({ data, setDate }) {
   // 省略其他逻辑
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  const dates = createYearArray();

  return (
    <div className="border border-1">
        {dates.map((week, outer_idx) => (
          <Stack gap={1}>
            {week.map((date, inner_idx) => (
              <Tile
                idx={inner_idx + outer_idx * 7}
                date={date}
                count={chartData.get(date) ?? 0}
                setDate={setDate}
              ></Tile>
            ))}
          </Stack>
        ))}
      </Stack>
    </div>
  );
}

列表组件（CommitByDayList） #

export default function CommitByDayList({ data, repoDict, date }) {
  const [filteredData, setFilteredData] = useState(null);

  useEffect(() => {
    if (date) {
      const filtered = data.filter(
        (item) => removeTimeFromDate(item.commitDate) === date
      );
      setCommitCount(filtered.length);
      const contributionActivity = organizeCommitsByRepo(filtered);
      setFilteredData(contributionActivity);
    }
  }, [date]);

  return (
    <div className="" style={{ fontSize: "Large", maxWidth: "500px" }}>
      <Accordion>
        {filteredData && filteredData.size > 0 ? (
          Array.from(filteredData.keys()).map((repoId, outer_idx) => (
            <AccordionItem eventKey={outer_idx}>
              <Accordion.Header className="">
                <p className="text-primary me-3 my-auto">
                  {repoDict[repoId]}
                </p>
                <p
                  className="text-secondary my-auto"
                  style={{ fontSize: "small" }}
                >
                  {filteredData.get(repoId).length} commits
                </p>
              </Accordion.Header>
            </AccordionItem>
          ))
        ) : (
          <p className="text-dark text-center">No commits today</p>
        )}
      </Accordion>
    </div>
  );
}

父组件（TeamMember） #

export default function TeamMember() {
  const [date, setDate] = useState(today)

  // 省略其他逻辑

  return (
    <div>
      <CommitByDayList data={commitData} repoDict={repos} date={date}/>
      <CustomHeatmap data={commitData} setDate={setDate}/> 
    </div>
  )
}

原表单控件实现（无延迟） #

<div className="d-flex mb-2 flex-row-reverse">
  <Form.Control
    className="border-2"
    style={{ width: "50%" }}
    size="lg"
    type="date"
    placeholder="DateRange"
    value={date}
    onChange={(e) => {
      setDate(e.target.value);
    }}
  />
</div>

问题排查与优化方案 #

1. 热力图组件重渲染优化 #

热力图生成了一整年的Tile组件（365/366个），父组件date更新时所有Tile都会重渲染，占用大量性能：

• 给Tile组件添加React.memo，避免无意义重渲染：

const Tile = React.memo(({ date, count, idx, setDate }) => {
  return (
      <div
        onClick={() => {
          setDate(date);
        }}
      ></div>
  );
});

• 给CustomHeatmap也添加React.memo，减少父组件状态变化时的重渲染：

export default React.memo(function CustomHeatmap({ data, setDate }) {
  // 原有逻辑不变
});

2. 列表组件过滤逻辑缓存 #

每次date更新时，列表组件的filter和organizeCommitsByRepo是同步计算，数据量大时会阻塞渲染：

• 用useMemo缓存计算结果，避免重复执行：

export default function CommitByDayList({ data, repoDict, date }) {
  const filteredResult = useMemo(() => {
    if (!date) return null;
    const filtered = data.filter(
      (item) => removeTimeFromDate(item.commitDate) === date
    );
    return {
      count: filtered.length,
      activity: organizeCommitsByRepo(filtered)
    };
  }, [date, data, repoDict]);

  return (
    <div className="" style={{ fontSize: "Large", maxWidth: "500px" }}>
      <Accordion>
        {filteredResult?.activity && filteredResult.activity.size > 0 ? (
          Array.from(filteredResult.activity.keys()).map((repoId) => (
            <AccordionItem eventKey={repoId} key={repoId}>
              <Accordion.Header className="">
                <p className="text-primary me-3 my-auto">
                  {repoDict[repoId]}
                </p>
                <p
                  className="text-secondary my-auto"
                  style={{ fontSize: "small" }}
                >
                  {filteredResult.activity.get(repoId).length} commits
                </p>
              </Accordion.Header>
            </AccordionItem>
          ))
        ) : (
          <p className="text-dark text-center">No commits today</p>
        )}
      </Accordion>
    </div>
  );
}

• 给AccordionItem添加唯一key（用repoId而非索引），减少DOM节点重建开销。

3. 日期格式一致性检查 #

确保Tile传递的date格式与removeTimeFromDate返回的格式完全一致（统一用YYYY-MM-DD字符串格式），避免因格式不匹配导致的无效计算或状态更新异常。

4. 事件处理优化 #

如果date是Date对象，点击时先转换成标准字符串再传递给setDate，避免因对象引用变化触发不必要的重渲染：

const Tile = React.memo(({ date, count, idx, setDate }) => {
  const handleClick = () => {
    const dateStr = date instanceof Date ? date.toISOString().split('T')[0] : date;
    setDate(dateStr);
  };
  
  return (
      <div onClick={handleClick}></div>
  );
});

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