前回までの状態
React HooksとuseStateについてについて学習した。
今回の目的
useEffectについて
useEffect
ページをレンダリングした後に副作用(DOMの変更、APIとの通信など)を実行する際に使う。書式は以下の通り。
useEffect(関数);
手順
前回作成したindex.tsxに以下の内容を変更、追加する。
インポート部分は以下のように変更する。
import { useState,useEffect } from 'react';
関数コンポーネント内部に以下の記述を追加する。
useEffect(() => {
document.title = `input is ${str} !`;
});
以下がソースコード全体。
import ReactDOM from 'react-dom';
import { useState,useEffect } from 'react';
const TextOutput = ({ name }: { name: string }) => {
return (
<p>Hello, {name}!</p>
);
}
const TextInput = () => {
const [str, setStr] = useState('初期値');
useEffect(() => {
document.title = `input is ${str} !`;
});
return (
<div>
<form >
<label>
入力欄<br />
<textarea
value={str}
onChange={event => setStr(event.target.value)}
/>
</label>
</form>
<TextOutput name={str} />
</div>
);
}
ReactDOM.render(
<TextInput />,
document.getElementById('root')
);
いつも通り、npm startでプロジェクトを実行する。
入力値に応じてページタイトルが変更されれば成功。
解説
import { useState,useEffect } from 'react';
useStateとuseEffectを使用するため、インポートしている。
useEffect(() => {
document.title = `input is ${str} !`;
});
ページタイトルをstrを使用して設定している。
通常ではページ表示後にタイトル変更は起きないが、useEffectを使用することによってstrの変更が発生した場合に変更される。
要約
ページをレンダリングした後に副作用を実行させる場合、useEffectを使用する。