React入門 練習問題 48:フック:同期的な副作用の実行
DOMの変更がブラウザの画面に描画される直前に、同期的に副作用(=外部システムとのやり取りやDOMの測定など)を実行するフックとして正しいものはどれか。
- useLayoutEffect
- usePaintEffect
- useBeforeEffect
- useSyncEffect
- useRenderEffect
正解と解説を見る
正解:useLayoutEffect
DOMの変更がブラウザに描画される直前に同期的に実行されるフックは、「useLayoutEffect」が正解です。
【正解の理由】
「useLayoutEffect」は、DOMの更新が完了した後、ブラウザが実際に画面をペイント(描画)する前に実行されます。そのため、描画前に要素のサイズや位置を測定してUIを再調整したい場合などに使われます。
【不正解の理由】
• 「usePaintEffect」というフックはReactに存在しない
• 「useBeforeEffect」というフックはReactに存在しない
• 「useSyncEffect」というフックはReactに存在しない
• 「useRenderEffect」というフックはReactに存在しない