useLayoutEffect

落とし穴

useLayoutEffect はパフォーマンスを低下させる可能性があります。可能な限り useEffect を使用することを推奨します。

useLayoutEffect は useEffect �?一�?ですが、ブラウザが画面を再描画する前に�?�行されます。

useLayoutEffect(setup, dependencies?)

リファレンス
- useLayoutEffect(setup, dependencies?)
使用法
- ブラウザが画面を再描画する前にレイアウトを測�?�する
トラブルシューティング
- ”useLayoutEffect does nothing on the server” というエラーが出る

リファレンス

`useLayoutEffect(setup, dependencies?)`

ブラウザが画面を再描画する前にレイアウト�?計測を行うために useLayoutEffect を呼び出します。

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

さらに例を見る

引数

setup: エフェクト�?ロジックが記述された関数です。こ�?セットアップ関数は、オプションでクリーンアップ関数を返すことができます。コンポーネントが初めて DOM に追加されると、React はセットアップ関数を�?�行します。依存配列 (dependencies) が変更された再レンダー時には、React はまず古い値を使ってクリーンアップ関数（あれば）を�?�行し、次に新しい値を使ってセットアップ関数を�?�行します。コンポーネントが DOM から削除された後、React はクリーンアップ関数を最後にもう一度�?�行します。
省略可能 dependencies: setup コード内で参照されるすべて�?リアクティブな値�?リストです。リアクティブな値には、props、state、コンポーネント本体に直接�?�言されたすべて�?変数および関数が含まれます。リンタが React 用に設�?�されている場合、すべて�?リアクティブな値が依存値として正しく指�?�されているか確認できます。依存値�?リストは要素数が一�?�である必要があり、[dep1, dep2, dep3] �?ようにインラインで記述する必要があります。React は、Object.is を使った比較で、それぞれ�?依存値を以前�?値と比較します。こ�?引数を省略すると、エフェクトはコンポーネント�?毎回�?レンダー後に再�?�行されます。

返り値

useLayoutEffect は undefined を返します。

注意点

useLayoutEffect はフックであるため、コンポーネント�?トップレベルやカスタムフック内で�?み呼び出すことができます。ループや条件文�?中で呼び出すことはできません。これが必要な場合は、新しいコンポーネントを抽出し、そ�?中にエフェクトを移動させてください。
Strict Mode が有効な場合、React は本物�?セットアップ�?前に、開発時専用�?セットアップ+クリーンアップサイクルを 1 回追加で�?�行します。これは、クリーンアップロジックがセットアップロジックと鏡�?ように対応しており、セットアップで行われたことを停止または元に戻していることを保証するため�?ストレステストです。問題が発生した場合は、クリーンアップ関数を�?�装します。
依存配列�?一部にコンポーネント内で�?�義されたオブジェクトや関数がある場合、エフェクトが必要以上に再�?�行される可能性があります。これを�?正するには、オブジェクト型および関数型�?不要な依存値を削除します。また、エフェクト�?外部に state �?更新や非リアクティブなロジックを抽出することもできます。
エフェクトはクライアント上で�?み�?�行されます。サーバレンダリング中には�?�行されません。
useLayoutEffect 内�?コードと、そこでスケジュールされたすべて�? state 更新は、ブラウザによる画面�?再描画をブロックします。過度に使用すると、アプリが遅くなります。可能な限り useEffect を使用してください。

使用法

ブラウザが画面を再描画する前にレイアウトを測�?�する

ほとんど�?コンポーネントは、何をレンダーするかを決�?�するために、画面上で�?位�?やサイズを知る必要はありません。単に JSX を返します。そ�?後、ブラウザがそ�?レイアウト（位�?とサイズ）を計�?�し、画面を再描画します。

しかし、それだけでは不十分な場合もあります。例えば、ある要素をホバーしたときに近くに表示されるツールチップを想像してみてください。十分なスペースがある場合、ツールチップは要素�?上に表示されるべきですが、収まらない場合は下に表示されるとします。ツールチップを正しい最終位�?にレンダーするためには、そ�?高さ（つまり、上部に収まるかどうか）を知る必要があります。

これを行うには、2 パスでレンダーを行う必要があります：

ツールチップを（位�?が間違っていても良い�?で）どこかにレンダーします。
ツールチップ�?高さを測�?�し、ツールチップを配�?する場所を決�?�します。
ツールチップを正しい場所で再度レンダーします。

これらすべては、ブラウザが画面を再描画する前に行わなければなりません。ユーザにツールチップが移動する�?を見せたくない�?です。ブラウザが画面を再描画する前にレイアウト�?測�?�を行うために useLayoutEffect を呼び出します。

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height); // Re-render now that you know the real height
  }, []);

  // ...use tooltipHeight in the rendering logic below...
}

動作をステップごとに説明します。

Tooltip は初回は tooltipHeight = 0 でレンダーされます（そ�?ため、ツールチップは間違った位�?に配�?される可能性があります）。
React はそれを DOM に配�?し、useLayoutEffect �?コードを�?�行します。
useLayoutEffect はツールチップ�?内�?��?高さを測�?�し、即時�?再レンダーをトリガします。
Tooltip は�?�際�? tooltipHeight で再度レンダーされます（ツールチップが正しく配�?されます）。
React が DOM 上で更新を行い、最終的にブラウザがツールチップを表示します。

以下�?ボタンにホバーしてみて、ツールチップが収まるかどうかに応じて位�?を調整する様子を観察してください。

Fork

import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';

export default function Tooltip({ children, targetRect }) {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
    console.log('Measured tooltip height: ' + height);
  }, []);

  let tooltipX = 0;
  let tooltipY = 0;
  if (targetRect !== null) {
    tooltipX = targetRect.left;
    tooltipY = targetRect.top - tooltipHeight;
    if (tooltipY < 0) {
      // It doesn't fit above, so place below.
      tooltipY = targetRect.bottom;
    }
  }

  return createPortal(
    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
      {children}
    </TooltipContainer>,
    document.body
  );
}

Tooltip コンポーネントを 2 パスで（初回は tooltipHeight が 0 で、2 回�?は�?�際に測�?�した高さで）レンダーする必要があるにもかかわらず、最終結果だけが表示されることに注�?してください。これが、こ�?例で useEffect �?代わりに useLayoutEffect が必要な理由です。詳細な違いは以下�?通りです。

useLayoutEffect vs useEffect

例 1/2:
`useLayoutEffect` はブラウザ�?再描画をブロックする

React は、useLayoutEffect 内�?コードとそ�?中でスケジュールされたすべて�? state 更新が、ブラウザが画面を再描画する前に処理されることを保証します。これにより、ツールチップをレンダーし、測�?�し、再度レンダーするという処理を、ユーザが最初�?余分なレンダーに気付かないように行うことができます。言い換えると、useLayoutEffect はブラウザ�?描画をブロックします。

Fork

import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';

export default function Tooltip({ children, targetRect }) {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);

  let tooltipX = 0;
  let tooltipY = 0;
  if (targetRect !== null) {
    tooltipX = targetRect.left;
    tooltipY = targetRect.top - tooltipHeight;
    if (tooltipY < 0) {
      // It doesn't fit above, so place below.
      tooltipY = targetRect.bottom;
    }
  }

  return createPortal(
    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
      {children}
    </TooltipContainer>,
    document.body
  );
}

補足

2 パスでレンダーしてブラウザをブロックすることはパフォーマンスを低下させます。できる限り避けてください。

トラブルシューティング

”`useLayoutEffect` does nothing on the server” というエラーが出る

useLayoutEffect �?�?的は、コンポーネントがレンダー�?ためにレイアウト情報を使用できるようにすることです。

初期コンテンツをレンダーする。
ブラウザが画面を再描画する前にレイアウトを測�?�する。
読み取ったレイアウト情報を使用して最終コンテンツをレンダーする。

あなた、またはあなた�?フレームワークがサーバレンダリングを使用している場合、React アプリは初期表示�?ためにサーバ上で HTML にレンダーされます。これにより、JavaScript コードがロードされる前に初期 HTML を表示できます。

問題は、サーバ上にはレイアウト情報がないことです。

先ほど�?例では、Tooltip コンポーネント内で�? useLayoutEffect �?呼び出しにより、高さに応じて自身を正しくコンテンツ�?上または下に配�?することができていました。初期�?サーバ HTML �?一部として Tooltip をレンダーしようとすると、これは不可能になります。サーバ上ではまだレイアウトが存在しないからです！したがって、サーバ上でレンダーしても、JavaScript がロードされ�?�行された際に、クライアント上で位�?�?「ジャンプ」が起こってしまいます。

通常、レイアウト情報に依存するようなコンポーネントは、サーバ上でレンダーする必要はありません。例えば、初期レンダー中に Tooltip を表示することはおそらく無意味です。これはクライアントで�?ユーザ操作に応じてトリガされるも�?だからです。

しかし、こ�?問題に直面している場合、いくつか�?選択肢があります。

useLayoutEffect を useEffect に�?き換えます。これにより React に対して、初期レンダー結果�?表示を描画をブロックせずに行ってよいことを伝えます（元�? HTML はエフェクトが�?�行される前に表示されるからです）。
あるいは、コンポーネントをクライアント専用としてマークします。これにより React に対して、サーバレンダリング中に最も近い <Suspense> バウンダリまで、コンテンツをロード中というフォールバック（例えば、スピナやグリマー）に�?き換えるように指示します。
あるいは、useLayoutEffect を持つコンポーネントをハイドレーション�?後に�?みレンダーします。false に初期化されたブーリアン型�? isMounted という state を保持しておき、useEffect �?呼び出し内で true に設�?�します。そしてレンダーロジックは return isMounted ? <RealContent /> : <FallbackContent /> �?ようにします。サーバ上およびハイドレーション中は、ユーザは useLayoutEffect を呼び出さない FallbackContent を見ることになります。そ�?後、React はそれをクライアント専用�? RealContent に�?き換えますが、そこには useLayoutEffect �?呼び出しを含むことができます。
コンポーネントを外部データストアと同期させており、レイアウト測�?�とは異なる理由で useLayoutEffect を使っている場合、代わりに useSyncExternalStore を検討してみてください。これはサーバレンダリングをサポートしています。

PrevioususeInsertionEffect NextuseMemo

useLayoutEffect

落とし穴

リファレンス

useLayoutEffect(setup, dependencies?)

引数

返り値

注意点

使用法

ブラウザが画面を再描画する前にレイアウトを測�?�する

useLayoutEffect vs useEffect

例 1/2: useLayoutEffect はブラウザ�?再描画をブロックする

補足

トラブルシューティング

”useLayoutEffect does nothing on the server” というエラーが出る

`useLayoutEffect(setup, dependencies?)`

例 1/2:
`useLayoutEffect` はブラウザ�?再描画をブロックする

”`useLayoutEffect` does nothing on the server” というエラーが出る