Reactでのパフォーマンス最適化まとめ

今回はフロントエンドであるReact上でパフォーマンスを出そうとしたらどのようにするべきなのかについてになります

名称	バージョン
React	19.0.0

コンポーネントのメモ化

React.memoを使用して、コンポーネントの再レンダリングを防ぎます

import React from 'react';

const MyComponent = React.memo((props) => {
  // コンポーネントの内容
});

詳しくは以下のサイトに詳しく記載されています

参考サイト

【React】Reactにおけるメモ化に関して(useCallback / useMemo / React.memo) #React - Qiita

どうも、@ちーずです。 アドベントカレンダー5日目、本日のテーマはReactにおけるメモ化に関してです！！ そもそもメモ ...

サイトへ移動

useMemoとuseCallbackの使用

useMemoとuseCallbackを使用して、不要な計算や関数の再生成を防ぎます
先ほどの『コンポーネントのメモ化』と一緒に使用するものとなります

import React, { useMemo, useCallback } from 'react';

const MyComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    return items.sort();
  }, [items]);

  const handleClick = useCallback(() => {
    // クリックハンドラの内容
  }, []);

  return (
    <div>
      {sortedItems.map(item => (
        <div key={item}>{item}</div>
      ))}
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

詳しくは以下のサイトに詳しく記載されています

参考サイト

【React】Reactにおけるメモ化に関して(useCallback / useMemo / React.memo) #React - Qiita

どうも、@ちーずです。 アドベントカレンダー5日目、本日のテーマはReactにおけるメモ化に関してです！！ そもそもメモ ...

サイトへ移動

不要な再レンダリングの防止

shouldComponentUpdateやReact.PureComponentを使用して、不要な再レンダリングを防ぎます
ただ、shouldComponentUpdateよりReact.PureComponentを使う方が簡単だと思います

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    // コンポーネントの内容
  }
}

詳しくは以下のサイトに詳しく記載されています

参考サイト

[React] Component と PureComponentの違い #shouldComponentUpdate - Qiita

1. 前書き React は Component を Update するか決定する過程で、 Component の sh ...

サイトへ移動

コードスプリッティング

React.lazyとSuspenseを使用して、コードスプリッティングを行い、初期ロード時間を短縮します

import React, { Suspense } from 'react';

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

const MyComponent = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);

詳しくは以下のサイトに詳しく記載されています

参考サイト

Reactアプリの初期ロード時間を短縮するコードスプリッティングのベストプラクティス | IT trip

アプリケーションの初期ロード時間は、ユーザー体験において極めて重要です。特に、Reactで構築されたアプリでは、コンポー ...

サイトへ移動

効率的なリストレンダリング:

リストをレンダリングする際には、keyプロパティを適切に設定し、必要に応じて仮想化（例えば、react-windowやreact-virtualizedを使用）を行う必要があります

import { FixedSizeList as List } from 'react-window';

const MyComponent = ({ items }) => (
  <List
    height={150}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </List>
);

詳しくは以下のサイトに詳しく記載されています

参考サイト

Reactのリストレンダリング: 仮想スクロールでパフォーマンスを最適化する方法 | IT trip

リストレンダリングはReactアプリケーションで頻繁に使用される重要な機能ですが、大量のデータを扱う際にはパフォーマンス ...

サイトへ移動

最後に

今回はパフォーマンス最適化をまとめてみました。紹介した中から状況に応じてプロジェクトに適応してもらればと思います

会社紹介

私が所属しているアドバンスド・ソリューション株式会社(以下、ADS)は一緒に働く仲間を募集しています

会社概要
「技術」×「知恵」＝顧客課題の解決・新しい価値の創造

この方程式の実現はADSが大切にしている考えで、技術を磨き続けるgeekさと、顧客を思うloveがあってこそ実現できる世界観だと思っています
この『love & geek』の精神さえあれば、得意不得意はno problem！
技術はピカイチだけど顧客折衝はちょっと苦手。OKです。技術はまだ未熟だけど顧客と知恵を出し合って要件定義するのは大好き。OKです
凸凹な社員の集まり、色んなカラーや柄の個性が集まっているからこそ、常に新しいソリューションが生まれています

ミッション
私たちは、テクノロジーを活用し、業務や事業の生産性向上と企業進化を支援します

ホームページ

アドバンスド・ソリューション株式会社｜ADS Co., Ltd.

Microsoft 365／SharePoint／Power Platform／Azure による DX コンサル・シス ...

サイトへ移動