学習メモ

関数コンポーネントとクラスコンポーネント

Hooks が実装される前は、クラスコンポーネントを使う必要があったが
今は関数コンポーネントを使うことが推奨されている

参考リンク：

• React:関数コンポーネントとクラスコンポーネントの違い

• Reactでクラスコンポーネントより関数コンポーネントを使うべき理由5選

• なぜクラスコンポーネントより関数コンポーネントが推奨されるのか？

useStateを使って数字をカウントさせるときの挙動について

useStateを使って数字をカウントアップするような実装をしたいとき、
教材では以下のような記述になっていることが多いが

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);

以下が正しい書き方

const [count, setCount] = useState(0);

const increment = () => setCount((prevCount) => prevCount + 1);
const decrement = () => setCount((prevCount) => prevCount - 1);

参考リンク：
【React】そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか

所感

参考にしようとしたコードがクラスコンポーネントで書かれていたため
関数コンポーネントとの書き方の違いを調べていました。

また、ボタンを押したときにカウントアップさせるようなやり方を考えていましたが
Reactではmapメソッドを使うことを思い出しました。次回はmapでの実装をすすめます。