10.1. Hooksへの導入

はじめにこのセクションでは、Reactでのフックの導入について学びます。フックは、関数コンポーネントで状態やライフサイクルメソッドを使用することを可能にする強力な機能です。GeekとGalの会話を追って、フックの基本を理解しましょう。

Reactフックは、関数コンポーネントで状態とライフサイクルメソッドが使えるようになった、Reactにとってすごく素晴らしい追加要素なんだよ！

面白そうだね！でも、そもそもなぜフックが導入されたんだい？

フックが登場する前は、関数コンポーネントは限定的で、状態を管理したりライフサイクルメソッドを使うことができなかったの。フックが登場して、関数コンポーネントがもっと強力で扱いやすくなったのよ！

フックが登場した理由

フックが導入された理由はいくつかあるわ：

レンダープロップスや高階コンポーネントのような複雑なパターンを使わずに、コンポーネント間で状態のあるロジックを再利用しやすくなります。

フックを使うと、ライフサイクルメソッドに基づく分割を強制するのではなく、コンポーネントを行っていることに基づいて分割できます。

クラスコンポーネントは "this" バインディングが多すぎて混乱しやすく、コードが難読化されにくいため、問題になります。フックを使うと、関数コンポーネントでより簡潔なコードが書けるようになります！

すごいね！フックはReactのいろいろな問題点に対処しているようだね！

フックの基本ルール

フックを使うときに守るべき基本ルールがいくつかあるわ：

フックはトップレベルでのみ呼び出しましょう。ループや条件、入れ子になった関数の中で呼び出しません。

フックはReactの関数コンポーネントからのみ呼び出しましょう。通常のJavaScript関数からは呼び出さないでください。

アドバイスありがとう！これらのルールに従うことで、バグや矛盾を回避できるね。

useState フックを使った簡単な例を見てみましょう：


import React, { useState } from 'react';



function Counter() {

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



  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

フックが関数コンポーネントをより強力で扱いやすくする方法がわかったよ！

そうなの！これで、関数コンポーネントで状態やライフサイクルメソッドが使えるようになり、より柔軟で保守しやすくなるわ。

おわりに

Reactフックは、関数コンポーネントで状態やライフサイクルメソッドが使えるようになり、関数コンポーネントがより強力で柔軟、保守性が向上しました！😃