質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1884閲覧

イベントハンドラをbuttonやtextfieldに渡す場合にuseCallbackを使う必要があるのか

maskmelon

総合スコア63

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/11/27 06:24

編集2020/11/27 06:35

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 }

ご存知の方いらっしゃいましたらご教授いただけると幸いです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/11/27 06:38

「useCallbackを使う必要はない」とありますが、どういう意味でしょうか? (useCallbackはパフォーマンスチューニングですので、動作させたいだけなら全く使わなくても問題はありません)
maskmelon

2020/11/27 06:43

趣旨が不明瞭ですみません。パフォーマンスチューニング目的であることは理解しています。 このケースでuseCallbackを使うメリットがあるかどうかをお聞きしたいです。
guest

回答1

0

ベストアンサー

下のコードの場合、buttonはメモ化されたコンポーネントではないので、useCallbackを使う必要はないということで合っていますでしょうか?

この結論を導く推論は適切ではありません。単なる<button>であっても、コールバック関数のインスタンスが別物に変われば、それを付け替える処理が必要となります。

投稿2020/11/27 06:52

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/11/27 06:55

上のComponentの場合、中にあるstateが1つだけ、そしてpropsも受け取っていない以上、Component自体をReact.memoしておけば、「描画が書き換わる時」は100%「stateが変化した時」であるため、useCallbackを付けて削減できる再描画はありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問