Skip to content

fix: No update if count is same #24

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

Merged
merged 1 commit into from
Jul 28, 2022
Merged

fix: No update if count is same #24

merged 1 commit into from
Jul 28, 2022

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Jul 28, 2022

某些特殊情况下,setState 值相同却会触发重复渲染。加一个对比,相同就略过。

fix ant-design/ant-design#36559

@vercel
Copy link

vercel bot commented Jul 28, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
overflow ✅ Ready (Inspect) Visit Preview Jul 28, 2022 at 6:05AM (UTC)

@codecov
Copy link

codecov bot commented Jul 28, 2022

Codecov Report

Merging #24 (60b52c1) into master (e4b1bf1) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master      #24   +/-   ##
=======================================
  Coverage   99.49%   99.50%           
=======================================
  Files           4        4           
  Lines         199      201    +2     
  Branches       64       64           
=======================================
+ Hits          198      200    +2     
  Misses          1        1           
Impacted Files Coverage Δ
src/Overflow.tsx 99.29% <100.00%> (+0.01%) ⬆️

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

@afc163
Copy link
Member

afc163 commented Jul 28, 2022

啥特殊情况?

@zombieJ
Copy link
Member Author

zombieJ commented Jul 28, 2022

啥特殊情况?

无法 Debug,只要打断点就不会报错。目前能探索到的就是移动端多了一个 focus 事件,多产生一个 commitRoot,触发了 syncRender。在 Menu 中数据由于是 ReactNode 翻译出来的 object 导致每次 useLayoutEffect 的 deps 都是新的 object,加上 setDisplayCount 每次调用都触发 render 复合出了这个问题。

@zombieJ
Copy link
Member Author

zombieJ commented Jul 28, 2022

无法 Debug,只要打断点就不会报错。目前能探索到的就是移动端多了一个 focus 事件,多产生一个 commitRoot,触发了 syncRender。在 Menu 中数据由于是 ReactNode 翻译出来的 object 导致每次 useLayoutEffect 的 deps 都是新的 object,加上 setDisplayCount 每次调用都触发 render 复合出了这个问题。

截屏2022-07-28 下午3 22 38

React 里干掉 focus 事件就好了,异同:

  • PC: onMouseEnter
  • Mobile: onMouseEnter & onFocus
     
    因为移动端是一次触发两个事件,后者 onFocus 事件将前面的优先级提升成了 sync 导致 queue 里的 setState 都重复 render。

@afc163
Copy link
Member

afc163 commented Jul 28, 2022

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.

Menu fails with "Maximum update depth exceeded" on mobile when using new React createRoot API
2 participants