[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEFQAXBPYAFS28VCN5RGAJ":3,"skill-same:01M6FEFQAXBPYAFS28VCN5RGAJ":54},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":27,"linkOnly":28,"markdownContent":29,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":6,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M6FEFQAXBPYAFS28VCN5RGAJ","react-hook-form",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-hook-form\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26],"react","form","hook","react hook form","2026-11-10 10:12:30",false,"# React Hook Form Best Practices\n\nComprehensive performance optimization guide for React Hook Form applications. Contains 41 rules across 8 categories, prioritized by impact to guide form development, automated refactoring, and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Writing new forms with React Hook Form\n- Configuring useForm options (mode, defaultValues, validation)\n- Subscribing to form values with watch\u002FuseWatch\n- Integrating controlled UI components (MUI, shadcn, Ant Design)\n- Managing dynamic field arrays with useFieldArray\n- Reviewing forms for performance issues\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Form Configuration | CRITICAL | `formcfg-` |\n| 2 | Field Subscription | CRITICAL | `sub-` |\n| 3 | Controlled Components | HIGH | `ctrl-` |\n| 4 | Validation Patterns | HIGH | `valid-` |\n| 5 | Field Arrays | MEDIUM-HIGH | `array-` |\n| 6 | State Management | MEDIUM | `formstate-` |\n| 7 | Integration Patterns | MEDIUM | `integ-` |\n| 8 | Advanced Patterns | LOW | `adv-` |\n\n## Quick Reference\n\n### 1. Form Configuration (CRITICAL)\n\n- `formcfg-validation-mode` - Use onSubmit mode for optimal performance\n- `formcfg-revalidate-mode` - Set reValidateMode to onBlur for post-submit performance\n- `formcfg-default-values` - Always provide defaultValues for form initialization\n- `formcfg-async-default-values` - Use async defaultValues for server data\n- `formcfg-should-unregister` - Enable shouldUnregister for dynamic form memory efficiency\n- `formcfg-useeffect-dependency` - Avoid useForm return object in useEffect dependencies\n\n### 2. Field Subscription (CRITICAL)\n\n- `sub-usewatch-over-watch` - Use useWatch instead of watch for isolated re-renders\n- `sub-watch-specific-fields` - Watch specific fields instead of entire form\n- `sub-usewatch-with-getvalues` - Combine useWatch with getValues for timing safety\n- `sub-deep-subscription` - Subscribe deep in component tree where data is needed\n- `sub-avoid-watch-in-render` - Avoid calling watch() in render for one-time reads\n- `sub-usewatch-default-value` - Provide defaultValue to useWatch for initial render\n- `sub-useformcontext-sparingly` - Use useFormContext sparingly for deep nesting\n\n### 3. Controlled Components (HIGH)\n\n- `ctrl-usecontroller-isolation` - Use useController for re-render isolation\n- `ctrl-avoid-double-registration` - Avoid double registration with useController\n- `ctrl-controller-field-props` - Wire Controller field props correctly for UI libraries\n- `ctrl-single-usecontroller-per-component` - Use single useController per component\n- `ctrl-local-state-combination` - Combine local state with useController for UI-only state\n\n### 4. Validation Patterns (HIGH)\n\n- `valid-resolver-caching` - Define schema outside component for resolver caching\n- `valid-dynamic-schema-factory` - Use schema factory for dynamic validation\n- `valid-error-message-strategy` - Access errors via optional chaining or lodash get\n- `valid-inline-vs-resolver` - Prefer resolver over inline validation for complex rules\n- `valid-delay-error` - Use delayError to debounce rapid error display\n- `valid-native-validation` - Consider native validation for simple forms\n\n### 5. Field Arrays (MEDIUM-HIGH)\n\n- `array-use-field-id-as-key` - Use field.id as key in useFieldArray maps\n- `array-complete-default-objects` - Provide complete default objects for field array operations\n- `array-separate-crud-operations` - Separate sequential field array operations\n- `array-unique-fieldarray-per-name` - Use single useFieldArray instance per field name\n- `array-virtualization-formprovider` - Use FormProvider for virtualized field arrays\n\n### 6. State Management (MEDIUM)\n\n- `formstate-destructure-formstate` - Destructure formState properties before render\n- `formstate-useformstate-isolation` - Use useFormState for isolated state subscriptions\n- `formstate-getfieldstate-for-single-field` - Use getFieldState for single field state access\n- `formstate-subscribe-to-specific-fields` - Subscribe to specific field names in useFormState\n- `formstate-avoid-isvalid-with-onsubmit` - Avoid isValid with onSubmit mode for button state\n\n### 7. Integration Patterns (MEDIUM)\n\n- `integ-shadcn-form-import` - Verify shadcn Form component import source\n- `integ-shadcn-select-wiring` - Wire shadcn Select with onValueChange instead of spread\n- `integ-mui-controller-pattern` - Use Controller for Material-UI components\n- `integ-value-transform` - Transform values at Controller level for type coercion\n\n### 8. Advanced Patterns (LOW)\n\n- `adv-formprovider-memo` - Wrap FormProvider children with React.memo\n- `adv-devtools-performance` - Disable DevTools in production and during performance testing\n- `adv-testing-wrapper` - Create test wrapper with QueryClient and AuthProvider\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n- Reference files: `references\u002F{prefix}-{slug}.md`\n\n## Related Skills\n\n- For schema validation with Zod resolver, see `zod` skill\n- For React 19 server actions, see `react-19` skill\n- For UI\u002FUX form design, see `frontend-design` skill\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Freact-hook-form",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-hook-form",{"tool":46,"command":47},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-hook-form",{"tool":49,"command":50},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-hook-form","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-hook-form\u002FSKILL.md",true,[],[55,67,77,86,92,99],{"skillNo":56,"name":57,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":63,"publishedAt":27},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[60],{"categoryNo":61,"categoryName":62,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[64,65,66],"model","model hierarchy","model hierarchy skill",{"skillNo":68,"name":69,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":73,"publishedAt":27},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[72],{"categoryNo":61,"categoryName":62,"taxonomyType":20,"taxonomyTypeDesc":21},[74,75,76],"MCP","zoom","zoom mcp",{"skillNo":78,"name":79,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":27},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[83,84,85,75],"sdk","zoom apps sdk","apps",{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":27},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[88],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":98,"publishedAt":27},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[97],{"categoryNo":61,"categoryName":62,"taxonomyType":20,"taxonomyTypeDesc":21},[94],{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":27},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[101]]