フックとは

フックとは、React.jsの機能をクラスを書かずに使えるようにする機能です。React.jsの16.8バージョンで導入されました。

フックの種類

フックには、次のようなものがあります。色々ありまｓが、代表的なものを2つ紹介します。

フックを使うメリット

まず、フックの便利さを実感してもらうために、例を1つ用意しました。ボタンを押すとページに表示された数値がカウントアップされる例です。

フックを使わずに書いた場合

class Counter extends React.Component {
	state = {
		count: 0
	};

	handleClick = () => {
		this.setState({
			count: this.state.count + 1,
		});
	};

	render() {
		return (
			<div>
				<button onClick={this.handleClick}>カウントアップ</button>
				<p>{this.state.count}</p>
			</div>
		);
	}
}

まず、こちらのstateの記述でcountの値が0に初期化されます。

state = {
	count: 0
};

そして、button要素には、クリックされたときにhandleClick関数が実行されるように指定されています。そのhandle関数では、count変数の値をインクリメント(値を1増加)させています。

フックを使うとここまで楽に書ける

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

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