現場TypeScriptでReact開発「連載中⑥」

Reactの新しい書き方、Reactは歴史のあるコンポーネントで、途中でいくつも機能追加が行われたり改善されています。
1つのことを実現するのに新旧何通りもやり方が提供されていたりします。新しい書き方が作られるのは、もちろん、そちらの方がミスが少なかったり、コードが短くなったりと改善が見込まれるからです。

Reactの場合はTypeScript的にも優しい書き方となっているため、もし古いコーディング規約に従っている場合は新しい書き方に整理していくと良いでしょう。
2019年2月にリリースされたReact 16.8のHooksにより、新しい書き方に大々的に移行可能になりました。もしこれ以前から続いているプロジェクトの場合、新しくつくるコンポーネントや、改修を行うコンポーネントから徐々に移行していくと良いでしょう。

今回はState Hook に Effect Hook、それにメモ化を扱う Hooks、さらに Custom Hook の作り方 まで見て行きましょう

まずはHooksでstateを扱ってみよう。

『State Hook』

『State Hook』といってクラスコンポーネントの state に相当するものを関数コンポーネントでも使えるようにする機能。
useState という関数を 使うんだけど、使い方はこんなふうになる

const [count, setCount] = useState(0); 
setCount(100);
setCount(prevCount => prevCount + 1);

useState は戻り値としてstate 変数とその state 更新関数をタプル として返す。上のように分割代入で受け取るわけ。