Reactで入力フォームなどを実装する際にuseCallback
でラップしたイベントハンドラを子のコンポーネントに渡す記述をよく見かけるのですが、下の例のように依存配列にuseState
のsetState
関数を渡す意味がよくわかりません。
親コンポーネントが再レンダリングされるたびにuseState
関数が実行され、その度にsetState
関数も新しく作られるのならイベントハンドラを毎回作り直すことになってしまうのでuseCallback
を使う意味がなくなってしまいます。
おそらくそうではないと思うのですが、そうだとすればどのタイミングでsetState
関数が変化するのでしょうか?
js
1const Form = () => { 2 const [email, setEmail] = useState('') 3 4 const inputEmail = useCallback(event => { 5 setEmail(event.target.value) 6 }, [setEmail]) 7 8 return ( 9 <div> 10 <TextInput 11 label={'メールアドレス'} 12 value={email} 13 type={'email'} 14 onChange={inputEmail} 15 /> 16 </div> 17 ) 18} 19 20export default Form
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。