Skip to content

perf(OTPInput): useState initializer function called only once#52878

Merged
li-jia-nan merged 3 commits intoant-design:masterfrom
Dandelion-F:master
Feb 19, 2025
Merged

perf(OTPInput): useState initializer function called only once#52878
li-jia-nan merged 3 commits intoant-design:masterfrom
Dandelion-F:master

Conversation

@Dandelion-F
Copy link
Copy Markdown
Contributor

@Dandelion-F Dandelion-F commented Feb 18, 2025 •
edited
Loading

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ❓ Other (about what?)

🔗 Related Issues

💡 Background and Solution

useState 传初始化函数，避免每次渲染重新执行

参考

📝 Change Log

Language Changelog
🇺🇸 English Optimize useState initial value generation
🇨🇳 Chinese 优化 useState 初始值生成

@bolt-new-by-stackblitz
Copy link
Copy Markdown

bolt-new-by-stackblitz Bot commented Feb 18, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2025 •
edited
Loading

👁 Visual Regression Report for PR #52878 Passed ✅

🎯 Target branch: master (9b854e4)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎

🎊 Congrats! No visual-regression diff found.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2025 •
edited
Loading

Preview is ready

@petercat-assistant
Copy link
Copy Markdown

petercat-assistant Bot commented Feb 18, 2025

Walkthrough

This pull request optimizes the performance of the OTPInput component by modifying the useState hook to use an initializer function. This change ensures that the initializer function is called only once, preventing unnecessary re-execution on every render.

Changes

File Summary
components/input/OTP/index.tsx Changed useState to use an initializer function for valueCells, improving performance by avoiding repeated execution during re-renders.

petercat-assistant[bot]
petercat-assistant Bot reviewed Feb 18, 2025
View reviewed changes
Comment thread components/input/OTP/index.tsx
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 18, 2025 •
edited
Loading

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52878

commit: 4a51340

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 18, 2025 •
edited
Loading

Bundle Report

Changes will increase total bundle size by 8 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.38MB 8 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
antd-with-locales.min.js 4 bytes 1.84MB 0.0%
antd.min.js 4 bytes 1.54MB 0.0%

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 18, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (9b854e4) to head (4a51340).
Report is 1 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff            @@
##            master    #52878   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          768       768           
  Lines        13847     13847           
  Branches      3629      3629           
=========================================
  Hits         13847     13847

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Wxh16144
Copy link
Copy Markdown
Member

Wxh16144 commented Feb 19, 2025

LGTM

@Wxh16144
Copy link
Copy Markdown
Member

Wxh16144 commented Feb 19, 2025

同步一下 master，这次修改不应该会有 image diff 才对

@Dandelion-F
Copy link
Copy Markdown
Contributor Author

Dandelion-F commented Feb 19, 2025

Done!

@li-jia-nan
Copy link
Copy Markdown
Member

li-jia-nan commented Feb 19, 2025 •
edited
Loading

同步一下 master，这次修改不应该会有 image diff 才对

需要等豆酱那个 PR 先合并

@li-jia-nan li-jia-nan merged commit 444f579 into ant-design:master Feb 19, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 19, 2025

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

@PeachScript PeachScript mentioned this pull request Feb 24, 2025
Merged
16 tasks
renny-ren pushed a commit to renny-ren/ant-design that referenced this pull request Apr 14, 2025
@Dandelion-F @thinkasany @renny-ren
perf(OTP): useState initializer function called only once (ant-design…
28b7d4a 
…#52878)

Co-authored-by: thinkasany <480968828@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@li-jia-nan li-jia-nan li-jia-nan approved these changes

+1 more reviewer

@petercat-assistant petercat-assistant[bot] petercat-assistant[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@Dandelion-F @Wxh16144 @li-jia-nan @thinkasany