React hooks userState

March 22, 2022

React.js

React.js useStateの振る舞い

React useState() 基本

// const [変数, セッター] = useState(初期値)
const [open, setOpen] = useState(true)
const toggle = () => setOpen(!open)
return (
  <>
    <button onClick={toggle}>{open ? 'close' : 'open'}</button>
    <div className={open ? 'isOpen' : 'isClose'}>
      Something
    </div>
  </>
)

React useState() 最初のレンダリング時のみ初期化

// 初期値に関数を指定
const [initialState] = useState(() => {
  return Math.floor(Math.random() * 10) + 1
})