Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(useDebounceEffect & useThrottleEffect): effectCallback called that do not rely on rerender #2399

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Damon0820
Copy link

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

#2398

💡 需求背景和解决方案

问题

这可能不是一个 bug,是一个性能问题。使用useDebounceEffect & useThrottleEffect ,当 callback 被执行前,多了一次额外的 rerender,即下图红色圈起来的部分。demo请看这里
image

实现

上面的问题是由于执行 effectCallback 要依赖 state 的更新(对应源码 useUpdateEffect(effect, [flag])),这个机制引起的。这样做的缺点是想要执行 effectCallback,需要先 setState(xx) ,则会引起多一次额外的 rerender。
我认为可以通过一些方式解决此问题,但是需要注意不能丢失了 cleanup 功能(参见文档)。

  • callback 的交给 run 方法及直接去触发即可。
  • 补充 cleanup 功能。
    • 在每次执行 useUpdateEffect 前,先执行 cleanup。
    • 组件 unmount 时,执行 cleanup。

📝 更新日志

语言 更新描述
🇺🇸 英文
🇨🇳 中文

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@Damon0820 Damon0820 changed the title Fix/2398 perf(useDebounceEffect & useThrottleEffect): effectCallback called that do not rely on rerender Dec 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant