React Hooksを整理する(useState)

1 min read読了の目安(約700字

gaKnight memo 1

React Hooks

https://ja.reactjs.org/docs/hooks-intro.html
クラスを書かなくても、状態(state)が管理できる優れもの。
この「クラスを書かなくてもいい」というところがポイントでHooksが無かった時代(React v16.8前)は
sample
class Sample extends React.Component<Props> {
  constructor(props) {
   super(props)
   //状態を定義
   this.state = {
    // クラスでは、コンストラクタ内で、this.stateの初期値をセット
      counter: 0,
      open: true
    }
  }
  
  handleOpen = () => {
   this.setState({open: !this.state.open})
  }
  
  render(): React.ReactNode {
    return ...
  }
}

だるすぎ!!!!
ってなるので、もっと簡潔に書きましょう。

sample
export const Sample: React.FC<Props> = ({}) => {
 const [counter, setCounter] = useState<number>(0)
 const [open, setOpen] = useState<boolean>(true)

 const toggle = () => setOpen(!open)
 
 return (
  ...
 )
}