フックを使用して React コンポーネントを書くときに注意すべき 5 つの点

Hook は React16.8 で追加された新しい機能です。 React の公式ドキュメントでは React フックの関連概念について説明されていますが、公式ドキュメントを読むだけではフックをうまく使いこなすのは難しく、フックを書く際に罠やエラーに陥りやすいです。この記事では5つの悪い場所をまとめています。

01. レンダリングが不要な場合はuseStateを使用する

関数コンポーネントでは、 useStateを使用して状態を管理できます。これにより、状態管理が非常に簡単になりますが、悪用される可能性も高くなります。次のコードサンプルを通じて、見落とされやすい領域を確認してみましょう。

非推奨×

関数 ClickButton(props){
 定数[count, setCount] = setState(0)
 定数onClickCount = () => {
  setCount((c) => c + 1)
 }
 定数onClickRequest = () => {
  apiCall(カウント)
 }
 
 戻る （
  <div>
   <button onClick={onClickCount}>クリック</button>
   <button onClick={onClickRequest}>送信</button>
  </div>
 ）
}

問題: 上記のコードをよく見ると、一見何も問題はありません。ボタンをクリックすると、 countが更新されます。しかし、問題はここにあります。 return 部分はcount状態を使用しておらず、 setCountごとにコンポーネントが 1 回再レンダリングされますが、これは必要なことではありません。余分なレンダリングによってページのパフォーマンスが悪化するため、次のようにコードを変更します。

推奨√
コンポーネント宣言サイクル中に保存できる変数だけが必要で、変数の更新でコンポーネントを再レンダリングする必要がない場合は、 useRefフックを使用できます。

関数 ClickButton(props){
 定数カウント = useRef(0)
 定数onClickCount = () => {
  count.current++
 }
 定数onClickRequest = () => {
  apiCall(カウント.現在)
 }

 戻る （
  <div>
   <button onClick={onClickCount}>クリック</button>
   <button onClick={onClickRequest}>送信</button>
  </div>
 ）
}

02. リンクの代わりにrouter.pushを使用する

React SPA アプリケーションでは、 react-routerを使用してルートジャンプを処理します。多くの場合、次のコードに示すように、コンポーネントにボタンを記述し、ボタンイベントをクリックしてルートジャンプを処理します。

非推奨×

関数 ClickButton(props){
 定数履歴 = useHistory()
 定数onClickGo = () => {
  history.push('/where-page')
 }
 戻る <button onClick={onClickGo}>どこへ移動する</button>
}

問題: 上記のコードは機能しますが、アクセシビリティの要件を満たしていません。ボタンはスクリーンリーダーによってリンクとして認識されません。したがって、コードを次のように変換できます。

推奨√

関数 ClickButton(props){
 戻る <Link to="/next-page">
  <span>どこへ行く</span>
 </リンク>
}

03. useEffectでアクションを処理する

場合によっては、React が DOM を更新した後に、追加のコードを実行したいことがあります。たとえば、ネットワークリクエストの送信、DOM の手動変更、ログの記録などです。

非推奨×

関数 DataList({ onSuccess }) {
 const [ロード中、setLoading] = useState(false);
 定数[エラー、setError] = useState(null);
 const [データ、setData] = useState(null);

 定数フェッチデータ = () => {
  読み込みをtrueに設定します。
  呼び出しAPI()
   .then((res) => setData(res))
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 使用効果(() => {
  フェッチデータ();
 }, []);

 使用効果(() => {
  if (!ロード中 && !エラー && データ) {
   成功の場合();
  }
 }, [読み込み中、エラー、データ、onSuccess]);

 <div>データ: {data}</div> を返します。
}

問題: 上記のコードでは 2 つのuseEffectが使用されています。最初の useEffects は非同期データを要求するために使用され、2 番目の useEffects はコールバック関数を呼び出すために使用されます。 2 番目のuseEffectの実行は、最初の非同期リクエストデータが成功した場合にのみトリガーされます。ただし、2 番目のuseEffectの依存関係が最初のuseEffectの成功したリクエストデータによって完全に制御されることを完全に保証することはできません。したがって、コードを次のように変換できます。

推奨√

関数 DataList({ onSuccess }) {
 const [ロード中、setLoading] = useState(false);
 定数[エラー、setError] = useState(null);
 const [データ、setData] = useState(null);

 定数フェッチデータ = () => {
  読み込みをtrueに設定します。
  呼び出しAPI()
   .then((res) => {
    データ設定(res)
    成功時()
    })
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 使用効果(() => {
  フェッチデータ();
 }, []);
 <div>データ: {data}</div> を返します。
}

04. 単一責任コンポーネント

コンポーネントを複数の小さなコンポーネントに分割する必要があるのはいつですか?コンポーネントツリーを構築するにはどうすればいいですか?これらすべての問題は、コンポーネントベースのフレームワークを使用するときに毎日発生します。ただし、コンポーネントを設計するときによくある間違いは、2 つのユースケースを 1 つのコンポーネントに結合することです。

非推奨×

関数 Header({ menuItems }) {
 戻る （
  <ヘッダー>
   <ヘッダー内部メニュー項目={メニュー項目} />
  </ヘッダー>
 );
}

関数 HeaderInner({ menuItems }) {
 isMobile() を返します? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

問題: このアプローチでは、 HeaderInnerコンポーネントは同時に 2 つの異なる機能を実行しようとします。一度に複数の機能を実行するのは理想的ではありません。さらに、コンポーネントを他の場所でテストしたり再利用したりすることが難しくなります。したがって、コードを次のように変換できます。

推奨√

条件を 1 レベル上に移動すると、コンポーネントの目的がわかりやすくなり、同時に 2 つの異なることを行おうとするのではなく、コンポーネントが<Tabs/>または<BurgerButton/>のいずれか 1 つの責任のみを持つようになります。

関数 Header(props) {
 戻る （
  <ヘッダー>
   {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}}
  </ヘッダー>
 ）
}

05. 単一責任の使用効果

componentWillReceivePropsやcomponentDidUpdateメソッドを比較することで、 userEffectの素晴らしさに気づきました。ただし、useEffect が適切に使用されていない場合は、問題が発生する可能性があります。

非推奨×

関数の例(props) {
 定数 location = useLocation();
 定数フェッチデータ = () => {
  /* API を呼び出す */
 };

 const updateBreadcrumbs = () => {
  /* パンくずリストを更新しています */
 };

 使用効果(() => {
  フェッチデータ();
  パンくずリストを更新します。
 }, [location.pathname]);

 戻る （
  <div>
   <パンくず />
  </div>
 );
}

問題: 上記のuseEffect同時に 2 つの副作用をトリガーしますが、それらすべてが必要な副作用ではないため、次のようにコードを変更できます。

推奨√

1 つの useEffect から 2 つの副作用を分離します。

関数の例(props) {
 定数 location = useLocation();

 定数フェッチデータ = () => {
  /* API を呼び出す */
 };

 const updateBreadcrumbs = () => {
  /* パンくずリストを更新しています */
 };

 使用効果(() => {
  フェッチデータ();
  パンくずリストを更新します。
 }, [location.pathname]);

 戻る （
  <div>
   <パンくず />
  </div>
 );
}