alibaba / alibaba/hooks

[useDeepCompareEffect] 在组件re-render时进行depsEqual造成性能问题

Open
#2,577 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15k
Forks
2.8k
Avg merge
15h 7m
Merged PRs (30d)
2

Description

在更新State为相同数据后,组件因为其他State/Props进行re-render时,useDeepCompareEffect会一直进行深度对比,导致严重的性能问题(因为真实数据层级较多)。

DEMO: https://codesandbox.io/p/sandbox/use-deep-compare-effect-t9f984?file=%2Fsrc%2FApp.tsx%3A31%2C5

复现步骤:
1、初始化页面
2、重新设置data为相同数据
3、设置其他state,重新渲染页面时,打开控制台,可以看到会进行data的深度对比

cc @caorushizi

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the repeated deep comparison in the linked CodeSandbox demo and then inspect the useDeepCompareEffect entry point in the hooks library. Confirm that changing an unrelated state no longer performs the expensive comparison, while dependency changes still trigger the effect as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.