useEffectの使い方

React.jsのuseEffectは、コンポーネントがレンダリングされた後、または状態やプロパティが変更された後に実行されます。

「副作用」と解説されているサイトや書籍が多くあります。なぜuseEffectが副作用といわれるのか一言でいうと、薬を飲んだときに副作用が現れることがあるように、何かが起きたときに起こすことを書くのがuseEffectだからです。

useEffectの使い方

useEffectを使う準備

useEffectを使うときは、まず下記を書きます。フックを使うならそのフックを必ずimportすると覚えておきましょう。

import { useState } from "react";

import { useState } from "react";
import { useEffect } from "react";

こちらのように1行にまとめて書くこともできます。

import { useState, useEffect } from "react";

useEffectの基本構文

useEffectの基本構文がこちら。

useEffect(() => {
	// 何か処理を実行する
}, [状態やプロパティ]);

[状態やプロパティ]は配列で、この配列で指定した状態やプロパティが変更された場合に、useEffectが実行されます。[state, props]のように複数を指定できます。

配列が空の場合は、コンポーネントがレンダリングされる度に実行されます。

useEffectを使う例

まず、ボタンを押すたびに数値がカウントアップされていく例から。

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.getElementById("output").innerText = count;
	}, [count]);

	return (
		<div>
			<button onClick={() => setCount(count + 1)}>カウントアップ</button>
			<div id="output"></div>
		</div>
	);
};

ReactDOM.render(
	<Counter />,
	document.getElementById('root')
);

続いて、useEffectに渡す配列を空にすると、ボタンを押してもカウントアップされず0のままです。

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.getElementById("output").innerText = count;
	}, []);

	return (
		<div>
			<button onClick={() => setCount(count + 1)}>カウントアップ</button>
			<div id="output"></div>
		</div>
	);
};

ReactDOM.render(
	<Counter />,
	document.getElementById('root')
);