[useDeepCompareEffect] 在组件re-render时进行depsEqual造成性能问题
Open
- 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
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