Reactでの不要な再レンダリング処理を最適化するための便利なライブラリについて学ぶ

学んだこと

useMemo

• 変数自体の memo 化
  • useMemo を呼び出すことで実現することができる。
  • 以下の処理の場合
    • 最初に読み込まれた際に 1 + 3 を計算する
    • temp に 4 が入った状態で使い回される

import { useState, useCallback, useMemo } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import { ChildArea } from './ChildArea';

export default function App() {
  const [text, setText] = useState('');
  const [open, setOpen] = useState(false);

  const onChangeText = (e) => setText(e.target.value);

  const onClickOpen = () => setOpen(!open);

  const onClickClose = useCallback(() => setOpen(false), [setOpen]);

  const temp = useMemo(() => 1 + 3, []);

  return (
    <div className="App">
      <input value={text} onChange={onChangeText} />
      <br />
      <br />
      <button onClick={onClickOpen}>表示</button>
      <ChildArea open={open} onClickClose={onClickClose} />
    </div>
  );
}

InlineStyles

• 以下の様に、変数内に CSS を定義しタグ内に Style を当てることを指す。

export const InlineStyle = () => {
  const containerStyle = {
    border: 'solid 2px #392eff',
    borderRadius: '20px',
    padding: '8px',
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
  };
  const titleStyle = {
    margin: '0',
    color: '#3d84a8',
  };
  const buttonStyle = {
    backgroundColor: '#abedd8',
    border: 'none',
    padding: '8px',
    borderRadius: '8px',
  };
  return (
    <div style={containerStyle}>
      <p style={titleStyle}>- Inline Style -</p>
      <button style={buttonStyle}>FIGHT!!</button>
    </div>
  );
};

CSSModules

• コンポーネントに対応するよう CSS ファイルを用意し、コンポーネント内で CSS ファイルを読み込んで使用する。

注意

• 今回sassというライブラリを使用する。StackBlitz の仮想環境で動かす際、sassを追加する必要がある。
  • tarminal でnpm install sassを実行し、インストールを行うことでsassの機能を使用することができる。
  • インストール後はpackege.json内の scripts に sass を追加する。
  • 追加した sass 内に読み込む SCSS ファイルを設定。
  • 設定後、npm run sassで sass をコンパイルし、sass の変換ファイルを作成する。
  • 変換後のファイルである CSS ファイルを import して使用する。
  • 参考ページ: https://qiita.com/rakawa_0802/items/ea9568abd7ae7459d439
• sass をインストール後、再度 StackBlitz で動かすと DevTools で以下のエラーを確認。
  • Pre-transform error: [sass] Cannot access 'compilation' before initialization Plugin: vite:css - ChatGPT に聞いてみると、以下の回答が返ってきた。 - これは、Vite が .scss を処理しようとしたときに 内部で Sass のバンドル処理が壊れてしまったことを示しています。とのこと。 - そのため、CSS として import するしかなさそう。

実際に作成してみる

• コンポーネント化した CSS を呼び出すようにした。
  • 他のコンポーネント内の CSS にて、同じ名前を定義していたとしてもコンポーネントしていれば競合することはない。

• CssModules.jsx

// 今回SCSSが読み込まれなかったためCSSを読み込むように変更
import classes from './CssModules.module.css';

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p className={classes.title}>-CSS Modules-</p>
      <button className={classes.button}>FIGHT!!</button>
    </div>
  );
};

• main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { InlineStyle } from './components/InlineStyle';
import { CssModules } from './components/CssModules';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <div className="App">
      <InlineStyle />
      <CssModules />
    </div>
  </StrictMode>
);