deve.K

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

React Hooksを書く為のルール

オリジナルreacthooks画像

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

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

必ずフックを使用する際は、React Hookのルールを厳守し従いながらコードを書いてくようにして下さい。

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

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

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

// ✖︎

    if (number === 0) {

useEffect(() => {

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

上記では機能しません、フックはReactフックが呼び出される順序に依存しています。

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

//  ◯

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

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

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

ネストされた関数で誤って呼び出す

function test1 () = {
let on = false;
let setOn = () => {};

 function test2() {
    // ✖︎
    [on, setOn] = useState(false);
  }
 }
function test1(x) {

// ◯
const [on, setOn] = useState(false);
}
function test2() {

  // ...
 }
}

ネストの場合、親の関数でフックを呼び出しこちらも最上位に配置して下さい。

これら一般的な間違いに注意する必要があります。

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

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

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

コード内で作った関数からフックを呼び出してはいけないということです。

例えばボタンを押すとトリガーされ、そのボタンをクリックするたびに数字が増える関数があるとします、その関数内でフックを呼び出すとエラーになるので、カスタムJavascript関数内でフックを使うのは避けましょうという事です。

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

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

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

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

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

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

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

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

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

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

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

『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> 
}

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

Propsの分解

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

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

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

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

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

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

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

本日は以上となります。

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

プライバシーポリシー