perf(OTPInput): useState initializer function called only once

[Dandelion-F]

中文版模板 / 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

• Read Keep a Changelog like a cat tracks a laser pointer.
• Describe the impact of the changes on developers, not the solution approach.
• Reference: https://ant.design/changelog

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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #52878 Passed ✅

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

🎊 Congrats! No visual-regression diff found.

[github-actions]

[petercat-assistant]

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.

[pkg-pr-new]

Open in Stackblitz

More templates

• farm-normal
• rsbuild-normal
• vite-normal
• umi-normal
• vite-practice
• with-nextjs-app-router-inline-style
• with-nextjs-extract-style
• with-nextjs-generate-css-on-demand
• with-nextjs-inline-style

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

commit: 4a51340

[codecov]

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]

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]

LGTM

[Wxh16144]

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

[Dandelion-F]

Done!

[li-jia-nan]

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

需要等豆酱那个 PR 先合并

• chore: fix input css var #52887

[github-actions]

🎉 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 链接）。