experimental_useFormStateã䜿çšããŠReactãã©ãŒã ã®ãšã©ãŒå埩ããã¹ã¿ãŒããŸããããå ç¢ãªãã©ãŒã ãã³ããªã³ã°ã®ããã®ãã¹ããã©ã¯ãã£ã¹ãå®è£ æŠç¥ãé«åºŠãªãã¯ããã¯ãåŠã³ãŸãã
React experimental_useFormStateã®ãšã©ãŒå埩ïŒå æ¬çã¬ã€ã
ãã©ãŒã ã¯ããŠãŒã¶ãŒå
¥åãšããŒã¿éä¿¡ã容æã«ãããã€ã³ã¿ã©ã¯ãã£ããªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®åºç€ã§ããç¹ã«ãšã©ãŒãçºçããå Žåãå
ç¢ãªãã©ãŒã ãã³ããªã³ã°ã¯è¯å¥œãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠéåžžã«éèŠã§ããReactã®experimental_useFormStateããã¯ã¯ããã©ãŒã ã®ç¶æ
ã管çããéèŠãªããšã«ããšã©ãŒãé©åã«åŠçããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸãããã®ã¬ã€ãã§ã¯ãexperimental_useFormStateã®ãšã©ãŒå埩ã®è€éããæãäžããå埩åããããŠãŒã¶ãŒãã¬ã³ããªãŒãªãã©ãŒã ãæ§ç¯ããããã®ãã¹ããã©ã¯ãã£ã¹ãå®è£
æŠç¥ãããã³é«åºŠãªãã¯ããã¯ãæäŸããŸãã
experimental_useFormStateãšã¯ïŒ
experimental_useFormStateã¯ãReact 19ã§å°å
¥ãããReactããã¯ã§ãïŒå·çæç¹ã§ã¯ãŸã å®éšçïŒãå
¥åå€ãããªããŒã·ã§ã³ã¹ããŒã¿ã¹ãéä¿¡ããžãã¯ãªã©ããã©ãŒã ã®ç¶æ
管çããã»ã¹ãå¹çåããŸããæåã§ã®ç¶æ
æŽæ°ãšãšã©ãŒãã©ããã³ã°ã«äŸåããåŸæ¥ã®ã¢ãããŒããšã¯ç°ãªããexperimental_useFormStateã¯ãã©ãŒã ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã宣èšçãã€å¹ççã«åŠçããæ¹æ³ãæäŸããŸããç¹ã«ãµãŒããŒã¢ã¯ã·ã§ã³ã®åŠçããã¯ã©ã€ã¢ã³ããšãµãŒããŒéã®ãã£ãŒãããã¯ã«ãŒãã®ç®¡çã«åœ¹ç«ã¡ãŸãã
ãã®äž»ãªæ©èœã®æŠèŠã¯æ¬¡ã®ãšããã§ãïŒ
- ç¶æ 管çïŒãã©ãŒã ããŒã¿ãäžå 管çããåå ¥åãã£ãŒã«ãã®æåã§ã®ç¶æ æŽæ°ã®å¿ èŠæ§ãæé€ããŸãã
- ã¢ã¯ã·ã§ã³ãã³ããªã³ã°ïŒå ¥åå€ã®æŽæ°ãããªããŒã·ã§ã³ã®ããªã¬ãŒãªã©ããã©ãŒã ã®ç¶æ ã倿Žããã¢ã¯ã·ã§ã³ã®ãã£ã¹ãããããã»ã¹ãç°¡çŽ åããŸãã
- ãšã©ãŒè¿œè·¡ïŒã¯ã©ã€ã¢ã³ãåŽãšãµãŒããŒåŽã®äž¡æ¹ã§ããã©ãŒã éä¿¡äžã«çºçãããšã©ãŒã远跡ããããã®çµã¿èŸŒã¿ã¡ã«ããºã ãæäŸããŸãã
- ãªããã£ãã¹ãã£ãã¯æŽæ°ïŒãã©ãŒã ãåŠçãããŠããéããŠãŒã¶ãŒã«å³æãã£ãŒãããã¯ãæäŸã§ãããªããã£ãã¹ãã£ãã¯æŽæ°ããµããŒãããŸãã
- 鲿ã€ã³ãžã±ãŒã¿ãŒïŒãã©ãŒã éä¿¡ã®ã¹ããŒã¿ã¹ããŠãŒã¶ãŒã«ç¥ãããããã®é²æã€ã³ãžã±ãŒã¿ãŒãç°¡åã«å®è£ ããæ¹æ³ãæäŸããŸãã
ãªããšã©ãŒå埩ãéèŠãªã®ã
广çãªãšã©ãŒå埩ã¯ãè¯å¥œãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããã«æãéèŠã§ãããŠãŒã¶ãŒããšã©ãŒã«ééãããšããé©åã«èšèšããããã©ãŒã ã¯ãæç¢ºã§ç°¡æœããã€å®è¡å¯èœãªãã£ãŒãããã¯ãæäŸããŸããããã«ããããã©ã¹ãã¬ãŒã·ã§ã³ãé²ããé¢è±çãæžãããä¿¡é Œãè²ã¿ãŸããé©åãªãšã©ãŒãã³ããªã³ã°ãæ¬ åŠããŠãããšãæ··ä¹±ãããŒã¿æå€±ããããŠã¢ããªã±ãŒã·ã§ã³ã«å¯ŸããåŠå®çãªèªèã«ã€ãªããå¯èœæ§ããããŸããæ¥æ¬ã®ãŠãŒã¶ãŒãç¡å¹ãªéµäŸ¿çªå·åœ¢åŒã§ãã©ãŒã ãéä¿¡ããããšããå Žé¢ãæ³åããŠã¿ãŠãã ãããæç¢ºãªã¬ã€ãã³ã¹ããªããã°ã圌ãã¯ãšã©ãŒãä¿®æ£ããã®ã«èŠåŽãããããããŸãããåæ§ã«ããã€ãã®ãŠãŒã¶ãŒã¯ãçŸå°ã®åºæºãšäžèŽããªãã¯ã¬ãžããã«ãŒãçªå·ã®åœ¢åŒã«æ··ä¹±ãããããããŸãããåªãããšã©ãŒå埩ã¯ããããã®ãã¥ã¢ã³ã¹ã«å¯Ÿå¿ããŸãã
å ç¢ãªãšã©ãŒå埩ãéæããããšã¯æ¬¡ã®ãšããã§ãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒæç¢ºã§æçãªãšã©ãŒã¡ãã»ãŒãžã¯ããŠãŒã¶ãŒãåé¡ãè¿ éãã€å¹ççã«è§£æ±ºããã®ãå°ããŸãã
- ãã©ãŒã é¢è±ã®åæžïŒåœ¹ç«ã€ãã£ãŒãããã¯ãæäŸããããšã§ããã©ã¹ãã¬ãŒã·ã§ã³ãæå°éã«æãããŠãŒã¶ãŒããã©ãŒã ã諊ããã®ãé²ããŸãã
- ããŒã¿æŽåæ§ïŒç¡å¹ãªããŒã¿ãéä¿¡ãããã®ãé²ãããšã§ãã¢ããªã±ãŒã·ã§ã³ã®ããŒã¿ã®æ£ç¢ºæ§ãšä¿¡é Œæ§ã確ä¿ããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åŒ·åïŒãšã©ãŒã¡ãã»ãŒãžã¯ãé害ãæã€ãŠãŒã¶ãŒãå«ããã¹ãŠã®ãŠãŒã¶ãŒã«ã¢ã¯ã»ã¹å¯èœã§ããã¹ãã§ããããã«ã¯ãæç¢ºãªèŠèŠçåå³ãšé©åãªARIA屿§ã®æäŸãå«ãŸããŸãã
experimental_useFormStateã«ããåºæ¬çãªãšã©ãŒãã³ããªã³ã°
ãŸããexperimental_useFormStateããšã©ãŒãã³ããªã³ã°ã«äœ¿çšããæ¹æ³ã説æããããã®åºæ¬çãªäŸããå§ããŸããããã¡ãŒã«ã¢ãã¬ã¹çšã®åäžã®å
¥åãã£ãŒã«ããæã€ã·ã³ãã«ãªãã©ãŒã ãäœæããã¡ãŒã«ã¢ãã¬ã¹ãæ€èšŒããŠç¡å¹ãªå Žåã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããæ¹æ³ã瀺ããŸãã
äŸïŒã¡ãŒã«ã¢ãã¬ã¹ã®ããªããŒã·ã§ã³
ãŸããã¡ãŒã«ãæ€èšŒãããµãŒããŒã¢ã¯ã·ã§ã³ãå®çŸ©ããŸãããïŒ
```javascript // ãµãŒããŒã¢ã¯ã·ã§ã³ async function validateEmail(prevState, formData) { 'use server'; const email = formData.get('email'); if (!email) { return { error: 'Email is required' }; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { return { error: 'Invalid email format' }; } return { success: true, message: 'Email is valid!' }; } ```次ã«ããã®ã¢ã¯ã·ã§ã³ãexperimental_useFormStateã䜿çšããŠReactã³ã³ããŒãã³ãã«çµ±åããŸãããïŒ
説æïŒ
react-domããexperimental_useFormStateãšexperimental_useFormStatusãã€ã³ããŒãããŸããvalidateEmailã¢ã¯ã·ã§ã³ãšåæç¶æ ãªããžã§ã¯ã{ error: null, success: false }ã§useFormStateãåæåããŸããuseFormStateã«ãã£ãŠè¿ãããformActionã¯ãformèŠçŽ ã®actionããããã£ãšããŠæž¡ãããŸããstateãªããžã§ã¯ãããerrorããããã£ã«ã¢ã¯ã»ã¹ããååšããå Žåã¯èµ€ã段èœã§è¡šç€ºããŸããuseFormStatusã䜿çšããŠããã©ãŒã ã®éä¿¡äžã¯éä¿¡ãã¿ã³ãç¡å¹ã«ããŸãã
ã¯ã©ã€ã¢ã³ããµã€ã vs. ãµãŒããŒãµã€ãããªããŒã·ã§ã³
äžèšã®äŸã§ã¯ãããªããŒã·ã§ã³ã¯ãµãŒããŒäžã§è¡ãããŸããããããããå¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããã«ãã¯ã©ã€ã¢ã³ããµã€ãã§ããªããŒã·ã§ã³ãå®è¡ããããšãã§ããŸããã¯ã©ã€ã¢ã³ããµã€ãããªããŒã·ã§ã³ã¯ããµãŒããŒãžã®ã©ãŠã³ãããªãããå¿ èŠãšããã«å³æãã£ãŒãããã¯ãæäŸããŸãããã ããã¯ã©ã€ã¢ã³ããµã€ãããªããŒã·ã§ã³ã¯ãã€ãã¹ãããå¯èœæ§ããããããããã¯ã¢ãããšããŠãµãŒããŒãµã€ãããªããŒã·ã§ã³ãå®è£ ããããšãéèŠã§ãã
ã¯ã©ã€ã¢ã³ããµã€ãããªããŒã·ã§ã³ã®äŸ
以äžã¯ãã¡ãŒã«ãã©ãŒã ã«ã¯ã©ã€ã¢ã³ããµã€ãããªããŒã·ã§ã³ã远å ããæ¹æ³ã§ãïŒ
```javascript 'use client'; import { experimental_useFormStatus as useFormStatus, experimental_useFormState as useFormState } from 'react-dom'; import { useState } from 'react'; function MyForm() { const [state, formAction] = useFormState(validateEmail, { error: null, success: false }); const { pending } = useFormStatus(); const [clientError, setClientError] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(event.target); const email = formData.get('email'); if (!email) { setClientError('Email is required'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setClientError('Invalid email format'); return; } setClientError(null); formAction(formData); }; return ( ); } export default MyForm; ```倿Žç¹ïŒ
- ã¯ã©ã€ã¢ã³ããµã€ãã®ãšã©ãŒã管çããããã«
useStateããã¯ã远å ããŸããã formActionãåŒã³åºãåã«ã¯ã©ã€ã¢ã³ããµã€ãã®ããªããŒã·ã§ã³ãå®è¡ããhandleSubmit颿°ãäœæããŸããã- ãã©ãŒã ã®
onSubmitããããã£ãæŽæ°ããŠhandleSubmitãåŒã³åºãããã«ããŸããã - ã¯ã©ã€ã¢ã³ããµã€ãã®ãšã©ãŒãããå Žåã¯éä¿¡ãã¿ã³ãç¡å¹ã«ããŸãã
ç°ãªããšã©ãŒã¿ã€ãã®åŠç
ãã©ãŒã ã§ã¯ã以äžãå«ãããŸããŸãªã¿ã€ãã®ãšã©ãŒãçºçããå¯èœæ§ããããŸãïŒ
- ããªããŒã·ã§ã³ãšã©ãŒïŒäžæ£ãªã¡ãŒã«åœ¢åŒãå¿ é ãã£ãŒã«ãã®æ¬ èœãªã©ãç¡å¹ãªå ¥åå€ã
- ãããã¯ãŒã¯ãšã©ãŒïŒãã©ãŒã ã®éä¿¡ã劚ãããããã¯ãŒã¯æ¥ç¶ã®åé¡ã
- ãµãŒããŒãšã©ãŒïŒããŒã¿ããŒã¹ãšã©ãŒãèªèšŒå€±æãªã©ãåŠçäžã®ãµãŒããŒåŽã®ãšã©ãŒã
- ããžãã¹ããžãã¯ãšã©ãŒïŒè³éäžè¶³ãç¡å¹ãªããã¢ãŒã·ã§ã³ã³ãŒããªã©ãç¹å®ã®ããžãã¹ã«ãŒã«ã«é¢é£ãããšã©ãŒã
åãšã©ãŒã¿ã€ããé©åã«åŠçããå ·äœçã§åœ¹ç«ã€ãšã©ãŒã¡ãã»ãŒãžãæäŸããããšãäžå¯æ¬ ã§ãã
äŸïŒãµãŒããŒãšã©ãŒã®åŠç
ãµãŒããŒãšã©ãŒãã·ãã¥ã¬ãŒãããããã«ãvalidateEmailãµãŒããŒã¢ã¯ã·ã§ã³ã倿ŽããŠã¿ãŸãããïŒ
ããã§ããŠãŒã¶ãŒãservererror@example.comãšå
¥åãããšããã©ãŒã ã¯ãµãŒããŒãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸãã
é«åºŠãªãšã©ãŒå埩ãã¯ããã¯
åºæ¬çãªãšã©ãŒãã³ããªã³ã°ãè¶ ããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããããã©ãŒã ã®å埩åãé«ããããã®ããã€ãã®é«åºŠãªãã¯ããã¯ããããŸãã
1. ãšã©ãŒå¢ç (Error Boundary)
ãšã©ãŒå¢çã¯ãåã³ã³ããŒãã³ãããªãŒã®ã©ããã§çºçããJavaScriptãšã©ãŒããã£ãããããããã®ãšã©ãŒããã°ã«èšé²ããã¯ã©ãã·ã¥ããã³ã³ããŒãã³ãããªãŒã®ä»£ããã«ãã©ãŒã«ããã¯UIã衚瀺ããReactã³ã³ããŒãã³ãã§ãããšã©ãŒãã¢ããªã±ãŒã·ã§ã³å šäœãã¯ã©ãã·ã¥ãããã®ãé²ãã®ã«åœ¹ç«ã¡ãŸãã
```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 次ã®ã¬ã³ããªã³ã°ã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«stateãæŽæ°ããŸãã return { hasError: true }; } componentDidCatch(error, errorInfo) { // ãšã©ãŒããšã©ãŒå ±åãµãŒãã¹ã«èšé²ããããšãã§ããŸãã console.error(error, errorInfo); } render() { if (this.state.hasError) { // ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸãã returnSomething went wrong.
; } return this.props.children; } } export default ErrorBoundary; ```ãã©ãŒã ã³ã³ããŒãã³ãããšã©ãŒå¢çã§ã©ããããŠãäºæããªããšã©ãŒããã£ããã§ããŸãïŒ
```javascript import ErrorBoundary from './ErrorBoundary'; function App() { return (2. ãããŠã³ã¹ãšã¹ããããªã³ã°
ãããŠã³ã¹ãšã¹ããããªã³ã°ã¯ã颿°ãå®è¡ãããé »åºŠãå¶éããããã«äœ¿çšããããã¯ããã¯ã§ããããã¯ããŠãŒã¶ãŒããã©ãŒã ã«å ¥åããéã«ãéå°ãªããªããŒã·ã§ã³åŒã³åºããAPIãªã¯ãšã¹ããé²ãã®ã«åœ¹ç«ã¡ãŸãã
ãããŠã³ã¹
ãããŠã³ã¹ã¯ã颿°ãæåŸã«åŒã³åºãããŠããäžå®ã®æéãçµéããåŸã«ã®ã¿å®è¡ãããããšãä¿èšŒããŸããããã¯ããŠãŒã¶ãŒãå ¥åãããã³ã«ããªããŒã·ã§ã³ãé »ç¹ã«å®è¡ãããã®ãé²ãã®ã«åœ¹ç«ã¡ãŸãã
```javascript function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; } // 䜿çšäŸïŒ const debouncedValidate = debounce(validateEmail, 300); ```ã¹ããããªã³ã°
ã¹ããããªã³ã°ã¯ã颿°ãç¹å®ã®æéå ã«æå€§ã§ã1åããå®è¡ãããªãããšãä¿èšŒããŸããããã¯ãAPIãªã¯ãšã¹ããé »ç¹ã«éä¿¡ãããã®ãé²ãã®ã«åœ¹ç«ã¡ãŸãã
```javascript function throttle(func, limit) { let inThrottle; return function(...args) { const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } }; } // 䜿çšäŸïŒ const throttledSubmit = throttle(formAction, 1000); ```3. ãªããã£ãã¹ãã£ãã¯æŽæ°
ãªããã£ãã¹ãã£ãã¯æŽæ°ã¯ããµãŒããŒãå¿çããåã§ãã£ãŠãããã©ãŒã ã®éä¿¡ãæåãããã®ããã«UIãæŽæ°ããããšã§ããŠãŒã¶ãŒã«å³æã®ãã£ãŒãããã¯ãæäŸããŸããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžããŸãããµãŒããŒããšã©ãŒãè¿ããå ŽåãUIã¯ãšã©ãŒãåæ ããããã«æŽæ°ãããŸãã
experimental_useFormStateã¯ããµãŒããŒã¢ã¯ã·ã§ã³ã倱æããŠãšã©ãŒãè¿ããå Žåã«å
ã«æ»ãããšã§ããªããã£ãã¹ãã£ãã¯æŽæ°ãæé»çã«åŠçããŸãã
4. ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ãšã©ãŒã¡ãã»ãŒãžããé害ãæã€ãŠãŒã¶ãŒãå«ããã¹ãŠã®ãŠãŒã¶ãŒã«ã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããã»ãã³ãã£ãã¯ãªHTMLèŠçŽ ã䜿çšããæç¢ºãªèŠèŠçåå³ãæäŸããARIA屿§ã䜿çšããŠã¢ã¯ã»ã·ããªãã£ãåäžãããŸãã
- ã»ãã³ãã£ãã¯HTMLã䜿çšããïŒ
<label>ã<input>ãªã©ã®é©åãªHTMLèŠçŽ ã䜿çšããŠãã©ãŒã ãæ§æããŸãã - æç¢ºãªèŠèŠçåå³ãæäŸããïŒè²ãã¢ã€ã³ã³ãããã³èª¬æçãªããã¹ãã䜿çšããŠãšã©ãŒã匷調衚瀺ããŸããè²èŠç°åžžã®ãŠãŒã¶ãŒã®ããã«è²ã®ã³ã³ãã©ã¹ããååã§ããããšã確èªããŠãã ããã
- ARIA屿§ã䜿çšããïŒ
aria-invalidãaria-describedbyãªã©ã®ARIA屿§ã䜿çšããŠãæ¯æŽæè¡ã«è¿œå æ å ±ãæäŸããŸãã - ããŒããŒãããã²ãŒã·ã§ã³ïŒãŠãŒã¶ãŒãããŒããŒãã䜿çšããŠãã©ãŒã ãããã²ãŒããããšã©ãŒã¡ãã»ãŒãžã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
5. ããŒã«ã©ã€ãŒãŒã·ã§ã³ãšåœéå
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ãã©ãŒã ãéçºããå ŽåãããŒã«ã©ã€ãŒãŒã·ã§ã³ãšåœéåãèæ ®ããããšãéèŠã§ããããã«ã¯ããã©ãŒã ãç°ãªãèšèªãæåãããã³å°åã®åºæºã«é©å¿ãããããšãå«ãŸããŸãã
- ããŒã«ã©ã€ãŒãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããïŒ
i18nextãreact-intlã®ãããªã©ã€ãã©ãªã䜿çšããŠç¿»èš³ã管çããŸãã - æ¥ä»ãšæ°å€ããã©ãŒãããããïŒãŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠãæ¥ä»ãæ°å€ãããã³é貚ã«é©åãªãã©ãŒãããã䜿çšããŸãã
- ç°ãªãå ¥å圢åŒãåŠçããïŒåœã«ãã£ãŠé»è©±çªå·ãéµäŸ¿çªå·ãäœæãªã©ã®å ¥å圢åŒãç°ãªãããšã«æ³šæããŠãã ããã
- è€æ°ã®èšèªã§æç¢ºãªæç€ºãæäŸããïŒãã©ãŒã ã®æç€ºãšãšã©ãŒã¡ãã»ãŒãžãè€æ°ã®èšèªã§å©çšå¯èœã§ããããšã確èªããŠãã ããã
ããšãã°ãé»è©±çªå·ãã£ãŒã«ãã¯ãŠãŒã¶ãŒã®å Žæã«åºã¥ããŠç°ãªã圢åŒãåãå ¥ããã¹ãã§ããããšã©ãŒã¡ãã»ãŒãžã¯ãã®èšèªã«ããŒã«ã©ã€ãºãããã¹ãã§ãã
experimental_useFormStateã«ãããšã©ãŒå埩ã®ãã¹ããã©ã¯ãã£ã¹
experimental_useFormStateã§ãšã©ãŒå埩ãå®è£
ããéã«å¿ã«çããŠããã¹ãããã€ãã®ãã¹ããã©ã¯ãã£ã¹ã¯æ¬¡ã®ãšããã§ãïŒ
- æç¢ºã§ç°¡æœãªãšã©ãŒã¡ãã»ãŒãžãæäŸããïŒãšã©ãŒã¡ãã»ãŒãžã¯çè§£ãããããåé¡ã解決ããããã®å ·äœçãªã¬ã€ãã³ã¹ãæäŸããã¹ãã§ãã
- é©åãªãšã©ãŒã¬ãã«ã䜿çšããïŒåé¡ã®é倧床ã瀺ãããã«ãç°ãªããšã©ãŒã¬ãã«ïŒäŸïŒèŠåããšã©ãŒïŒã䜿çšããŸãã
- ãšã©ãŒãé©åã«åŠçããïŒãšã©ãŒãã¢ããªã±ãŒã·ã§ã³ãã¯ã©ãã·ã¥ãããã®ãé²ãããã©ãŒã«ããã¯UIãæäŸããŸãã
- ãããã°ã®ããã«ãšã©ãŒããã°ã«èšé²ããïŒãããã°ãšãã©ãã«ã·ã¥ãŒãã£ã³ã°ã容æã«ããããã«ããšã©ãŒãäžå çãªå Žæã«èšé²ããŸãã
- ãšã©ãŒãã³ããªã³ã°ããã¹ãããïŒãšã©ãŒãã³ããªã³ã°ããžãã¯ãæåŸ ã©ããã«æ©èœããããšã確èªããããã«ã培åºçã«ãã¹ãããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãèæ ®ããïŒã·ãŒã ã¬ã¹ã§çŽæçãªãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠãŒã¶ãŒã念é ã«çœ®ããŠãšã©ãŒãã³ããªã³ã°ãèšèšããŸãã
çµè«
experimental_useFormStateã¯ãReactã¢ããªã±ãŒã·ã§ã³ã§ãã©ãŒã ã®ç¶æ
ã管çãããšã©ãŒãåŠçããããã®åŒ·åã§å¹ççãªæ¹æ³ãæäŸããŸãããã®ã¬ã€ãã§æŠèª¬ãããã¹ããã©ã¯ãã£ã¹ãšãã¯ããã¯ã«åŸãããšã§ããšã©ãŒãçºçããå Žåã§ããŠãŒã¶ãŒã«ããžãã£ããªãšã¯ã¹ããªãšã³ã¹ãæäŸãããå
ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãã©ãŒã ãæ§ç¯ã§ããŸãããã©ãŒã ãå埩åãããä¿¡é Œã§ãããã®ã§ããããšãä¿èšŒããããã«ãæç¢ºãªãšã©ãŒã¡ãã»ãŒãžãã¢ã¯ã»ã¹ãããããã¶ã€ã³ãããã³åŸ¹åºçãªãã¹ããåªå
ããããšãå¿ããªãã§ãã ããã
experimental_useFormStateãæçããReactã®å®å®ããäžéšã«ãªãã«ã€ããŠããã®èœåããã¹ã¿ãŒããããšã¯ãé«å質ã§ã€ã³ã¿ã©ã¯ãã£ããªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã«ãªããŸãããã®æœåšèœåãæå€§éã«åŒãåºããåè¶ãããã©ãŒã ãšã¯ã¹ããªãšã³ã¹ãäœæããããã«ããã®æ©èœãå®éšããæ¢æ±ãç¶ããŠãã ããã