useCallbackとReact.memoについて以下のように認識しています。(間違っていたらご指摘ください)
-
原則として、親コンポーネントが再レンダリングされると子コンポーネントも再レンダリングされる
-
React.memoで子コンポーネントをラップすると、親コンポーネントから渡されるpropsが変化した場合のみ子コンポーネントが再レンダリングされる
-
propsとして渡されたコールバック関数は親コンポーネントが再レンダリングされるたびに別のオブジェクトとして判定されるため、子コンポーネントはmemo化されていてもやはり再レンダリングされる
-
useCallbackでラップされたコールバック関数は依存配列に変化がない限り同一オブジェクトとして判定されるため、子コンポーネントのpropsは変化せず、親コンポーネントが再レンダリングされても子コンポーネントは再レンダリングされない
そうだとすると、下のコードの場合、buttonはメモ化されたコンポーネントではないので、useCallbackを使う必要はないということで合っていますでしょうか?
tsx
1 export const Component: React.FC = () => { 2 const [open, setOpen] = React.useState<boolean>(false) 3 const handleOpen = React.useCallback(() => { 4 setOpen(true); 5 }, [setOpen]); 6 7 return ( 8 <button onClick={handleOpen}>オープン</button> 9 ); 10 }
またそれはMaterial-UI等のCSSフレームワークから提供されるButtonコンポーネントやTextFieldコンポーネントについても同様でしょうか?(それらのコンポーネントがメモ化されているかどうか自力でソースを見つけることができませんでした)
tsx
1 import { TextField } from '@material-ui/core' 2 3 export const Component: React.FC = () => { 4 const [title,setTitle] = React.useState<string>('') 5 6 const handleLabelInput = React.useCallback( 7 (e: React.ChangeEvent<HTMLInputElement>) => { 8 setLabel(e.currentTarget.value); 9 }, 10 [] 11 ); 12 return ( 13 <TextField 14 label="title" 15 variant="outlined" 16 margin="dense" 17 fullWidth 18 onChange={handleTitleInput} 19 /> 20 ); 21 }
ご存知の方いらっしゃいましたらご教授いただけると幸いです。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー