問題一覧に戻る
中級副作用
問題43: useLayoutEffect

描画前の同期的な処理とuseEffectとの違いを理解します。useLayoutEffectはDOMの変更後、ブラウザが画面を描画する前に同期的に実行されます。DOM要素のサイズや位置を測定する場合や、視覚的なちらつきを防ぎたい場合に使用します。ただし、同期的に実行されるためパフォーマンスへの影響があるので、本当に必要な場合のみ使用すべきです。通常はuseEffectで十分なケースが多いです。

import React, { useState,  } from 'react';

function SizeTracker() {
  const [size, setSize] = useState(0);

  // 描画前に実行
  (() => {
    // DOMを測定
    const width = document.body.clientWidth;
    setSize(width);
    console.log("測定: " + width);
  }, []);

  return (
    <div>
      <p>幅: {size}px</p>
      <button onClick={() => window.dispatchEvent(new Event('resize'))}>
        再測定
      </button>
    </div>
  );
}

export default SizeTracker;
···