概要
今回はReact hooks の種類の一つである useEffect の基本的な使い方についてまとめた記事になります。
useEffectが主に使われるシーンとして、下記の2点が上げられます。
1 uesEffectは主にサイトを開いた時に自動で処理を走らせる際に使われる
2 useEffectはWebAPIデータの取得を行う際などに用いられることが多い
3 UI以外の処理で主に使用される
useEffectの書き方
useEffectの基本的な書き方。useEffect(()=>{})
今回はブラウザ上に作成したボタンをクリックするとブラウザ上とコンソール画面で
カウントが +1 ずつサれる処理の記述になります。
import React, { useState, useEffect } from "react";
const Counter: React.FC = () => {
const [count, setConst] = useState(0);
useEffect(() => {
console.log("useEffect");
});
return (
<button
onClick={() => {
setConst((prevCount) => prevCount + 1);
}}
>
{count}
</button>
);
};
export default Counter;
【処理の結果】
ボタンを押すと画面上で+1ずつカウントされる。
コンソール上では「useEffect」の文字と、その横でカウントの数値が+1ずつされます。
【useEffect部のコード解説】
↓4,5,6行目 useEffect(() => {
console.log("useEffect");
});
useffectにコンソール上での文字列を出力する簡単な処理を書いています。
console.log("コンソール上に出力したい文字を書く")
マウント時のみuseEffect内の処理を行う
import React, { useState, useEffect } from "react";
const Counter: React.FC = () => {
const [count, setConst] = useState(0);
// useEffect(()=>{}) が基本の型
useEffect(() => {
console.log("useEffect");
}, []);
return (
<button
onClick={() => {
setConst((prevCount) => prevCount + 1);
}}
>
{count}
</button>
);
};
export default Counter;
【第2引数に空の配列を指定したuseEffect部のコード解説】
const Counter: React.FC = () => {
const [count, setConst] = useState(0);
// useEffect(()=>{}) が基本の型
useEffect(() => {
console.log("useEffect");
}, []);
上のコードの最後の行にある
}, []);
にuseEffectでいう第2引数を設定しています。
今回は空の配列を設定しており、マウント時のみ処理が走る設定を行いました。
マウンド：最初にコンポーネントがDOMに出力される処理。
（最初に画面が読み込まれた際に走る処理）
参考記事
今回の参考にした動画
今回は、useEffectの簡単な書き方についてまとめました。
今後、第2引数の書き方やクリーンナップ関数の書き方の記事も出していこうと思いますので、
よろしくお願いします。