ああ、リアクション！ UI を構築するための私たちのお気に入りのライブラリ。これは、Web アプリをインタラクティブで高速に感じさせる魔法の薬ですが、ある日、そうではなくなります。突然、物事の速度が遅くなっていることに気づきます。ボタンをクリックするのは伝書鳩で手紙を送るような感覚です。あなたのアプリは電光石火の速さからコーヒーブレイクのような遅い速度まで変化し、ユーザーはあなたに「見た目」を与え始めます。

でも心配しないでください！コーヒーが人生の問題のほとんどを解決してくれるのと同じように (私たちはそう思いたいのですが)、いくつかの重要なテクニックを使えば、React アプリをターボチャージして最高速度に戻すことができます。毎日のカフェイン摂取よりも早く React アプリを最適化する 6 つの簡単な方法を見てみましょう。

1.コード分​​割: 必要なものだけをロード

部屋に入ってすべての照明をつけてから、必要なのは 1 つだけであることに気づいたことがありますか?これは、React アプリがすべてを 1 つの大きな塊にバンドルするときに行うことです。代わりに、コード分割を使用すると、現時点で必要なアプリの部分のみをロードします。部屋ごとに電気を点けるようなものです!

React.lazy() と Suspensei を使用することは、これを実装する完璧な方法です:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
    
  );
}

効果がある理由: コード分割は、必要になるまで未使用のコードの読み込みを延期することで、アプリの初期読み込み時間を短縮します。ユーザーは、画面に何かが表示される前にアプリ全体が読み込まれるのを待つ必要はありません。

2.画像の遅延読み込み: すべてのスナックを一度に読み込まないでください

ピザを注文すると、代わりに 1 年分の食料品が届くと想像してみてください。ばかげているように聞こえますよね？そうですね、すべての画像を事前にロードすると、このようなことが起こります。代わりに、画像を遅延読み込みするので、一度にピザを 1 枚ずつ注文するのと同じように、必要なものだけを取得できます。

react-lazyload のようなライブラリを使用すると簡単に解決できます:

import LazyLoad from 'react-lazyload';


  

効果がある理由: 画像を遅延読み込みすることで、ページの最初の読み込み時間が短縮され、必要なときにのみ画像がダウンロードされるため、パフォーマンスとユーザー エクスペリエンスの両方が向上します。

3. useCallback と useMemo: React のメモリブースト

洗う時間を節約するために同じコーヒーマグを再利用し続けるのと同じように、React は許可すれば値と関数を再利用できます。 useCallback と useMemo は、レンダリングのたびに再計算されないように、高価な計算や関数を保存するのに役立つフックです。

useMemo 例:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

useCallback 例:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

なぜ役立つのか: useMemo を使用すると、React は高価な計算を不必要にやり直す必要がなくなります。また、useCallback を使用すると、レンダリングのたびに新しい関数を作成できなくなります。これにより、RAM をアップグレードするなど、React がスムーズに実行され続けます!

4. React.memo によるメモ化: 不必要な再レンダリングを停止する

同じ話を何度も繰り返す友人がいますか? React も同様で、必要がない場合でもコンポーネントを再レンダリングすることがあります。ここで React.memo が登場し、プロパティが変更されない限り React がコンポーネントを再レンダリングするのを防ぎます。

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

なぜ役立つのか: React.memo は React に「おい、これは前にも聞いたことがあるな!」と言うようなものです。何か新しいことがない限り、同じことを繰り返さないでください。」不必要な再レンダリングを回避し、時間とリソースを節約します。

5.効率的な状態管理: 必要な場合にのみ持ち上げる

状態を上げることは React の一般的なパターンですが、場合によっては、状態を上げすぎたり、間違った場所で状態を管理しすぎたりするという罪を犯します。これにより、過剰な再レンダリングが発生する可能性があります。可能な限り状態をコンポーネントに対してローカルに保ち、本当に必要な場合にのみ状態を解除することで不必要な再レンダリングを回避します。

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      
      
    >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

それが役立つ理由: 状態をより慎重に管理し、必要な場合にのみ解除することで、兄弟コンポーネントの不必要な再レンダリングを回避できます。これにより、アプリの集中力と効率性が維持されます。

6.ユーザー入力のデバウンス: 落ち着いて反応してください!

誰かが検索バーに必死に入力し、あなたのアプリがすべてのキーストロークを処理しようとしているところを想像してください。可哀想な React はおそらく弾丸の汗をかいているでしょう!デバウンスを開始します。これは、キーを 1 回押すたびではなく、ユーザーが一時停止した後にのみ入力を処理するプロセスです。

lodash.debounce を使用すると、この問題を解決できます:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

これが役立つ理由: React はキーストロークごとにパニック発作を起こすのではなく、デバウンスによって一息つきます。これにより、検索フィールドやフォーム フィールドなど、リアルタイムのユーザー入力を処理する際のパフォーマンスが向上します。

結論: React アプリケーションの最適化はロケット科学ではありません。それは、コーヒーを一度に 6 杯飲まないようにすることに似ています。コード分​​割から画像の遅延読み込みまで、これらのテクニックは、React アプリの高速性と応答性を維持するのに役立ちます。したがって、次回アプリが遅く感じ始めたら、覚えておいてください。それは React のせいではありません。少し最適化が必要なだけです。

React アプリの最適化にはバランスが重要であることを覚えておいてください。これらのテクニックをすべてすぐに取り入れる必要はありません。代わりに、アプリのボトルネックを特定し、適切な最適化を適用して、コーヒーを飲み終えるよりもアプリが高速になるのを観察してください。

読んでいただきありがとうございます。投稿が気に入ったら、共有して提案を残してください。

私とつながってください

ウェブサイト: Hardik Gohil

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardickohilhlr

ありがとう❤️