React Hooksの10種類を理解する（Basic: useState）
useStateの基本
-
useStateとは、state（状態）のvalueと、stateを更新するための関数を返すhooksである。
通常のReact
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
上記のcalculatorクラスの場合、初回で temperature の値は空白となっており、その状態を設定している。この値を更新する場合は、inputの onChange にてhandleChange 関数を立ち上げて、setState 関数によって、temperature の値をを更新している。これを、useState を使用すると、以下のようになる。
React Hooksを用いたCalculatorクラス
- React HooksとTypeScriptを用いてcomponentを作成しています。
const TemperatureInput = () => {
const [temperature, setTemperature] = useState<number>(); // ※1
return (
<fieldset>
<legend>Enter temperature:</legend>
<input
value={temperature}
onChange={(value: number) => setTemperature(value)}
/>
</fieldset>
)
}
-
useStateで状態管理することによって、constructorとhandleChange(update)の部分を一気にまとめて管理することができるようになる。これによって、コード量も減るので、よりわかりやすくなった。 - (※1) useStateを定義してあげるときには、setState部分は、stateに
setを付け加えてあげれば、基本的には大丈夫かと思います。
state の遅延初期化
- もし、初期のstateが、単純な値を設定をしないのであれば、関数を渡すことも可能となっている。初回のrender時にのみ実行される。
const TemperatureInput = () => {
const [temperature, setTemperature] = useState<number>((value: number) => {
if (value <= 5 && value >= -5) {
return 0;
} else {
return value;
}
});
return (
<fieldset>
<legend>Enter temperature:</legend>
<input
value={temperature}
onChange={(value: nuber) => setTemperature(value)}
/>
</fieldset>
)
}
state 更新の回避
- state更新時に、現在の値と同じだった場合は、更新が回避されて処理が終了される。
- もしrender中に高度な計算をしている場合は、
useMemoを使用すると良い。