deve.K

エンジニアが未来を切り開く。

English

React Hooksを書く為のルール


スポンサーリンク

オリジナルreacthooks画像

初心者と熟練したReact開発者の両方が、Reactフックのルールに従うことを忘れがちな方々がいらっしゃいます。 

当ブログの記事では、コンポーネントにフックを実装する際のルールとして保持するのに役立つReactフックとコードをよりクリーンで読みやすくし、日々の作業をより良くしていくヒントを共有していきます。

必ずReact Hooksのルールを厳守し従いながらコードを書いてくようにして下さい。

トップレベルのフックのみを呼び出す

『ループ』『条件』および『ネスト』された関数内でフックを呼び出さないでください、これらは機能できない事を意味します。

一部のフックを条件付きで使用する場合は、それらのフック内に条件を記述していきます。

    if (number === 0) {

useEffect(() => {

      setNumBer(10 + Math.random() * 200)
  }, [number])
}

ではなく、条件付きで何かを実行したい場合は、条件をフックの中に入れ記述していきます。

useEffect(() => {
    if (number === 0) {
      setNumBer(10 + Math.random() * 200)
    }
  }, [number])

これにより、コンポーネントレンダリングされるたびに常に同じ順序で呼び出され、

またReactが複数の呼び出し『useState』と『useEffect』呼び出しの間のフックの状態を正しく保持できるようにします。

さらに詳しく学びたい方は、公式ドキュメントを参照下さい。 Rules of Hooks – React

関数コンポーネントからのみフックを呼び出す

フックは通常の『JavaScript関数』から呼び出さないでください。

React『関数コンポーネント』と『カスタムフック』からのみ呼び出す必要があり、このルールに従うことでコンポーネント内のすべてのステートフルロジックがコードから明確に表示されます。

ReactフックにESLintプラグインを使用する

Reactは『eslint -plugin-react-hooks』という名のESLintプラグインを作成し、開発者がプロ​​ジェクトで『ReactHooks』をより正しい方法で作成できるようにします。

このプラグインはアプリケーションを実行しようとする前に、フックエラーをキャッチして修正するので非常に貴方の開発に役立ちます。

このコマンドでインストールします

npm install eslint-plugin-react-hooks —save-dev

プラグインをESLint構成に追加します。

{ 
  "plugins":[ 
    // ... 
    "react-hooks" 
  ]、
  "rules":{ 
    // ... 
    "react-hooks / rules-of-hooks": "error"、
    "react-hooks / exhaustive -deps ":" warn "//エフェクトの依存関係のチェック
  } 
}

※Create React Appにはデフォルトで含まれています。

このプラグインには2つのルールがあります。

・react-hooks/rules-of-hooks

先程のルールで説明した、フックのルールに準拠するようにコードを強制するだけとなります。

・react-hooks/exhaustive-deps

『exhaustive-deps』を適用するために使用され、useEffect効果関数内で参照されるすべての値は、依存関係の配列にも表示される必要性があります。

変数は内部で参照されます。

ですが、依存関係配列では渡されないので

Appコンポーネントでは、『exhaustive-deps』の警告をトリガーします。

const App =({postsId})=> { 

  const [posts、setPosts] = useState(null)

  useEffect( ()=> { 

    GetUser(postsId).then(posts => 

setPosts(posts))

  }、[]) //ここにはpostsIdはありません

  return <div>詳細:</ div> 
}

依存関係によって引き起こされるバグを回避します。

小道具の分解

可能な限り分解を使用してみてください。

これにより関数コンポーネントが読みやすくなり、コンポーネントで使用しているものをすぐに理解できるようになます。

関数コンポーネントのライフサイクルをより理解する

関数コンポーネントはクラスコンポーネントレンダリング部分にすぎません、フックを使用しない限りコンポーネントの各再レンダリングですべての変数、関数、およびデータが再作成される可能性が高いということになります。

なので『useEffect/useCallback依存関係配列』や『useRef』の乱用などいつ『Refs』を使用するか問題を解決するための良い解決策・他の方法を考える、これらをより理解し精通していく事が重要となります。

これらに精通したい方はまず基礎からお入り下さい。

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

本日は以上となります。

最後まで読んで頂きありがとうございました!。

私が共有したヒントは全てが完全ではないかもしれません、ですが『ReactHooks』を正しい方法で作成するのに当ブログの記事が役立つことを願っています。

プライバシーポリシー