Zenn
😃

React Hooksの10種類を理解する（Basic: useState）

2021/07/10に公開
React
React Hooks
tech

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 を使用すると良い。

reference

GitHubで編集を提案

Discussion