React Hooks の useState メモ

React Hooks の useState を使用する事で、関数コンポーネントでも状態の管理・更新ができるようになる。

import React, { useState } from 'react'

const App = props => {
  const [state, setState] = useState(props)
  const {count, amount} = state

  return (
    <>
      <p>Count: {count}</p>
      <input type="number" value={amount} onChange={(e)=> setState({...state, amount: parseInt(e.target.value)})}/>
      <button onClick={() => setState({...state, count: count + amount})}>Add</button>
      <button onClick={() => setState({...state, count: count - amount})}>Subtraction</button>
      <button onClick={() => setState(props)}>reset</button>
    </>
  )
}

App.defaultProps = {
  count: 0,
  amount: 0
}

export default App

• useState() の引数として状態管理を行う値を渡す
• useState()の返り値は、State と State を更新する為の関数が配列(setState)
• setStateで値を更新する時は、破壊的な更新を行わない為にスプレッド構文を使用する
• setState()は、関数を渡す事も可能

<button onClick={() => setState((oldState) => (
  {...oldState, count: count - amount}
))}>
  Subtraction
</button>