Sep 30, 2019

ReactのStateの初期化について

↓ 一般的な初期化方法

import React, { useState } from 'react'

const Sample: React.FC = () => {
  const [ count, setCount ] = useState(0)

  const decreaseCount = () => {
    setCount(count - 1)
  }

  const increaseCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <button onClick={decreaseCount}> - </button>
      <span> {count} </span>
      <button onClick={increaseCount}> + </button>
    </div>
  )
}

export default Sample

↓ のようにも書ける

import React, { useState } from 'react'

const countInitial = () => {
  return 0
}

const Todo: React.FC = () => {
  const [ todos, setTodos ] = useState(() => countInitial())

  const decreaseCount = () => {
    setCount(count - 1)
  }

  const increaseCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <button onClick={decreaseCount}> - </button>
      <span> {count} </span>
      <button onClick={increaseCount}> + </button>
    </div>
  )
}

参考文献
What I Have Learned Using React Hooks