useStateの使い方

useStateは、コンポーネントの状態を管理するためのフックです。フックとは、React.jsの機能をクラスを書かずに使えるようにする機能です。

useStateの使い方

useStateを使う準備

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

import { useState } from "react";

useStateの基本構文

useStateの基本構文がこちら。

const [state, setState] = useState(initialState);

見慣れない記述かもしれませんが、これはJavaScriptの分割代入という記法に沿ったものです。useState関数には、初期値と状態を変更する関数を渡します。

setState関数に何か値を渡すと、state変数にその値が反映されます。数値、文字列、オブジェクト、配列など、さまざまなデータ型を扱うことができます。

state変数や、setState関数の部分は、その都度わかりやすい名前にすると良いです。

const [name, setName] = useState("");

const [score, setScore] = useState(0);

useStateを使った例

setStateを使った例をいくつか見てみましょう。

①ボタンを押すと数値がカウントアップする例

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

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

	const increment = () => {
		setCount(count + 1);
	};

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

ReactDOM.render(
	<App />,
	document.getElementById("root")
);

useState(0)で、count変数の初期値が0になります。また、この例では状態を変更する関数でsetCount関数が指定されているので、この関数に値を渡してcount変数の値を更新します。

incrementボタンを押すと、setCount関数が呼び出され、countの値が1増加します。countの値が変更されると、コンポーネントが再レンダリングされます。

②チェックボックスの状態を管理する例

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

const App = () => {
	const [isChecked, setIsChecked] = useState(false);

	return (
		<div>
			<input type="checkbox" onChange={() =>; setIsChecked(!isChecked)} />
			{isChecked ? "チェックされています" : "チェックされていません"}
		</div>
	);
};

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

③テキスト入力の状態を管理する例

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

const App = () => {
	const [text, setText] = useState("");

	return (
		<div>
			<input type="text" value={text} onChange={(e) =>; setText(e.target.value)} />
			<p>{text}</p>
		</div>
	);
};

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

④ドロップダウンの状態を管理する例

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

const App = () => {
	const [value, setValue] = useState("");

	const options = [
		{ value: "1", label: "1" },
		{ value: "2", label: "2" },
		{ value: "3", label: "3" },
	];

	return (
		<div>
			<select onChange={(e) => setValue(e.target.value)}>
				{options.map((option) => (
					<option key={option.value} value={option.value}>{option.label}</option>
				))}
			</select>
			<p>{value}</p>
		</div>
	);
};

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

他にもある活用例

こんな用途での活用もできます。

フックを使うと楽できる

冒頭でも書いたように、フックを使うと、React.jsの機能をクラスを書かずに使えるので、コードが簡潔になります。

フックを使う場合の書き方の例

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

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

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

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

フックを使わない場合の書き方の例

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
	constructor(props) {
		super(props);
		this.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>
		);
	}
}

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