Reactを扱う初心者と熟練した開発者の両方が、Reactフックの使用においてルールを守り忘れてしまうことがあります。
この記事では、Reactコンポーネントにフックを実装する際に必要なルールについて説明し、クリーンで読みやすいコードを書くためのヒントを提供します。
これにより、日々の作業をより良くすることができます。
フックを使用する際は、必ずReactフックのルールを厳守してコードを書くようにしてください。
これにより、Reactアプリケーションをより安定させ、バグを回避することができます。
トップレベルのフックのみを呼び出す
「ループ」、「条件」および「ネスト」された関数内でフックを呼び出さないでください、これらは機能できない事を意味します。
一部のフックを条件付きで使用する場合は、それらのフック内に条件を記述していきます。
// ✖︎ 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() { // ✖︎ const [on, setOn] = useState(false); } }
function test1(x) { // ◯ const [on, setOn] = useState(false); } function test2() { // ... } }
ネストの場合、親の関数でフックを呼び出しこちらも最上位に配置して下さい。
これら一般的な間違いに注意する必要があります。
さらに詳しく学びたい方は、公式ドキュメントを参照下さい。 Rules of Hooks – React
Reactの関数コンポーネントからのみフックを呼び出す
フックは通常の『JavaScript関数』から呼び出さないでください。
コード内で作った関数からフックを呼び出してはいけないということです。
例えばボタンを押すとトリガーされ、そのボタンをクリックするたびに数字が増える関数があるとします、その関数内でフックを呼び出すとエラーになるので、カスタムJavascript関数内でフックを使うのは避けましょうという事です。
React『関数コンポーネント』と『カスタムフック』からのみ呼び出す必要があり、このルールに従うことでコンポーネント内のすべてのステートフルロジックがコードから明確に表示されます。
では、カスタムJavaScript関数内で間違った例を以下に示します。
import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); useEffect(() => { console.log("Count updated!"); }, [count]); } return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increase Count</button> </div> ); } export default MyComponent;
この例では、handleClick関数内で useEffectフックが呼び出されています。
これは、フックを通常のJavaScript関数から呼び出しているため、Reactが予期しない動作をする可能性があるため避ける必要があります。
正しい使い方は、Reactコンポーネント内でフックを使用することです。
以下は、正しくフックは、Reactコンポーネントの中で使用されています。
import React, { useState, useEffect } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log("Count updated!"); }, [count]); function handleClick() { setCount(count + 1); } return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increase Count</button> </div> ); } export default MyComponent;
この例では、 useEffect フックが正しく使用されているのが分かります。
useEffect フックは、 countステートが変更される度に実行されます。
また、 「handleClick」関数ではsetCount関数が呼び出されていますが、 useEffect フックは別の場所で使用されているため、問題はありません。
つまり、Reactコンポーネント内でフックを使用する正しい方法を示しています。
ReactフックにESLintプラグインを使用する
Reactは「eslint -plugin-react-hooks」という名のESLintプラグインを作成し、開発者がプロジェクトでReactHooksをより正しい方法で作成できるようにします。
このプラグインはアプリケーションを実行しようとする前に、フックエラーをキャッチして修正するので非常に貴方の開発に役立ちます。
※ Create React App(以下CRA)にはデフォルトで含まれています。
下記コマンドでインストールします
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の分解を使用してみてください。
// Propsを分解しない場合の例 function MyComponent(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> ); }
// Propsを分解する場合の例 function MyComponent({ title, description }) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> ); }
これにより関数コンポーネントが読みやすくなり、コンポーネントで使用しているものをすぐに理解できるようになます。
また、Propsに誤字や変数名の間違いがあった場合でも、分解している場合はエラーが発生するため、早期に問題を発見しやすくなります。
関数コンポーネントのライフサイクルをより理解する
関数コンポーネントは、クラスコンポーネントのレンダリング部分に相当します。
しかし、フックを使用しない場合、コンポーネントが再レンダリングされるたびに、変数、関数、およびデータが再作成される可能性が高くなります。
この問題を解決するための良い解決策は、「useEffect」や「useCallback」の依存関係配列を使用したり、「useRef」を使用することです。
ただし、これらを乱用すると、いつ「Ref」を使用するか混乱する可能性があるため、これらをより理解し精通することが重要です。
このような問題に取り組みたい方は、まず基礎から学ぶことをお勧めします。
当ブログでそれら、基礎を学ぶ事ができますので、是非参照してください。
本日は以上となります。
私が共有したヒントは全てが完全ではないかもしれません、ですがReactフックを正しい方法で作成するのに当ブログの記事が役立つことを願っています。
この記事が役に立ったら、ブックマークし、他の方にも共有して頂けると幸いです。