ReactHooksのすごさを理解した話

ReactHooks凄い！ヤバイ！パラダイムシフト！という話はよく聞いていたけれども、正直あまりその価値を理解してなかった。が、自分で使ってみてその価値を理解した。ReactHooks凄いよ。特にカスタムHooksはReactの世界観変えるパワー持ってるよ！(今更)

実例

端的に言うと、こんな感じコンポーネントが

import React, { useEffect, useState } from 'react'
...
import fetchJsonp from 'fetch-jsonp'

const Result: React.FC = () => {
  interface IInfo {
    ...
  }
  const initialNovelInfo = {XXXX}
  const [info, setInfo] = useState<IInfo>(initialInfo)

  useEffect(() => {
    const url = 'https://XXXXXXX'
    fetchJsonp(url).then(response => {
      return response.json()
    }).then(response => {
      const info = response[1]
      setInfo({
        ...
      })
    })
  }, [])

  const infoProps = {
    title: info.title,
    writer: info.writer,
    story: info.story
  }
  return (
    <div className="result">
      <Info {...infoProps} />
      <ResultContent />
    </div>
  )
}

export default Result

こんな感じに変わる

import React from 'react'
...

const Result: React.FC = () => {
  const InfoProps = useInfo()

  return (
    <div className="result">
      <Info {...lInfoProps} />
      <ResultContent />
    </div>
  )
}

export default Result