React アプリケーションを構築する場合、useEffect や useLayoutEffect などのフックは副作用を管理するために不可欠なツールですが、いつどのように使用するかを理解するのは難しい場合があります。この初心者向けガイドでは、これら 2 つのフックの主な違い、いつ使用する必要があるか、およびよくある間違いを回避する方法を詳しく説明します。
あなたが家を飾っているところを想像してみてください。まず家具を配置し（レイアウト）、その後に装飾（エフェクト）を追加するとよいでしょう。 React では、エフェクト はこれらの装飾のようなもので、コンポーネントのレンダリング後にデータのフェッチやイベント リスナーの設定などのアクションを実行できるようになります。
React は、副作用を管理するための 2 つの主要なフック、useEffect と useLayoutEffect を提供します。どちらも重要な役割を果たしますが、いつどのように実行されるかによって動作が異なります。
useEffect から始めましょう。これは、React の副作用用に最もよく使用されるフックです。このフックは、コンポーネントのレンダリング後に実行されるため、API からのデータの取得、DOM の更新、サブスクリプションの設定などのアクションに最適です。
import { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty array means this effect runs once when the component mounts
return <div>{data ? data.name : 'Loading...'}</div>;
}
この例では、コンポーネントのレンダリング後に useEffect を使用してデータを取得します。これは、コンポーネントの初期レイアウトに影響を与えないアクションに最適です。
一方、useLayoutEffect は、より特殊なフックです。これは、DOM が更新された後、ブラウザが画面を描画する前に同期的に実行されます。つまり、useLayoutEffect はエフェクトの実行が完了するまでビジュアル更新をブロックできるため、レイアウトの測定やアニメーションの同期など、ユーザーが変更を確認する前に実行する必要があるタスクに最適です。
import { useLayoutEffect, useRef } from 'react';
function LayoutComponent() {
const ref = useRef();
useLayoutEffect(() => {
const height = ref.current.offsetHeight;
console.log('Element height:', height);
// This runs before the browser paints the screen
});
return <div ref={ref}>Hello, world!</div>;
}
この例では、useLayoutEffect を使用して、レンダリング直後、ブラウザーが画面を更新する前に、DOM 要素の高さを測定します。これにより、レイアウトを直接操作する必要があるタスクがより正確になります。
一見すると、useEffect と useLayoutEffect は似ているように見えますが、タイミングと使用例は大きく異なります。それぞれをいつ使用するかを簡単に説明します:
useEffect: ほとんどの副作用、特にデータのフェッチ、イベント リスナーの設定、状態の更新など、レイアウトに直接影響しない副作用にはこれを使用します。
useLayoutEffect: ブラウザーが画面を描画する前に DOM を測定または操作する必要がある場合にこれを使用します。これは、要素の寸法の計算やアニメーションの同期など、レイアウト関連のタスクにとって非常に重要です。
間違いの例:
import { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty array means this effect runs once when the component mounts
return <div>{data ? data.name : 'Loading...'}</div>;
}
解決策: 必要な場合にのみ状態を更新し、依存関係配列内の正しい依存関係を使用します。
例:
import { useLayoutEffect, useRef } from 'react';
function LayoutComponent() {
const ref = useRef();
useLayoutEffect(() => {
const height = ref.current.offsetHeight;
console.log('Element height:', height);
// This runs before the browser paints the screen
});
return <div ref={ref}>Hello, world!</div>;
}
useEffect と useLayoutEffect のどちらを選択するか最初は混乱するように思えるかもしれませんが、いつどのように実行されるかを明確に理解すれば、React コンポーネントを最適化してパフォーマンスと読みやすさを向上させることができます。
useEffect は、ほとんどの副作用に対する頼りになるフックで、レンダリング後に実行され、必要に応じてブラウザーが自由に画面を更新できるようになります。ただし、useLayoutEffect は、ユーザーに画面が表示される前に実行する必要があるレイアウト関連の更新のために予約する必要があります。
エフェクトを賢く管理することで、不必要な再レンダリングやレイアウトの不具合などのよくある落とし穴を回避し、React アプリの高速性、効率性、保守の容易さを確保します。
React スキルを向上させる準備はできましたか? 次のプロジェクトで useEffect と useLayoutEffect を使用して、アプリのパフォーマンスがどのように向上するかを確認してください。
この記事が気に入っていただけた場合は、私の仕事をサポートすることを検討してください:
以上が初心者のための React useEffect と useLayoutEffect の完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
