Reactで再レンダリングされた要素をCSSアニメーションを使用し視覚的に確認する方法

初めに

今回紹介する方法はReact Developer Toolsでも再レンダリングの可視化はできます。

そのことを念頭において本記事を読み進めてください。

まずはデモでご確認ください。

CodeSandboxでデモを用意したので、まずは確認してみてください。

デモの内容はuseCallbackを使用した時の再レンダリングの発生を検証したものです。

カウントをプラスするボタンをクリックした時に、青色に光る部分があるかと思います。その部分が再レンダリングされています。

※デモを作成するにあたって参考にさせて頂いた記事
【useCallback】React hookが便利すぎる

再レンダリングされた部分を光らせる方法

それでは、先程のデモのよう再レンダリングされた部分を青く光らせる方法の紹介に入ります。

光るアニメーションをCSSで定義

青く光っている仕組みはただのCSSアニメーションです。

以下のCSSをどこでもいいので記述してください。僕の場合は適当にグローバルcssに記述しました。

@keyframes rendered {
  0% {
    background-color: #8fd6ff;
  }
  100% {
    background-color: transparent;
  }
}

.rerender {
  animation-name: rendered;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

ユニークな文字列を生成する関数を作成

どんな形でもいいので実行する度に違う結果を返す関数を作成します。

今回はランダムな文字列を返す関数を作成しました。

// ユニークidを生成
let count = 0;
export default function uuid() {
  // ランダムなIDを生成
  const randomID = Math.random().toString(36).slice(2);
  return `${randomID}--${count++}`;
}

export function reset() {
  count = 0;
}

それでは実装します

実装は非常に簡単です。
再レンダリングを確認したい要素に以下の属性を設定します。

• className="rerender"
  ※CSSアニメーションを適用するため
• key={uuid()}
  ※再レンダリング時にkeyを更新することでCSSアニメーションが実行されます

//CSSはグローバルで読み込んでることとします

import uuid from "utils/uuid"; //ランダムな文字列を返す関数

const Home = () => {
  return (
    <p className="rerender" key={uuid()}>
      この要素は再レンダリングされると青く光ります
    </p>
  );
};

export default Home;

以上で実装は終わりです。

細かな確認は最初に紹介したデモを見てください。React.memoやuseClaabackを使用し検証しています。

最後に

今回は再レンダリングの可視化のついて紹介しましたが、React Developer Toolsでも確認は可能です（むしろこっちの方が楽）。

今回の実装はCodeSandboxなどを使用して検証を行い、発信するときなどに役に立つと思っています。

参考にさせて頂いた記事

【useCallback】React hookが便利すぎる
再レンダリングを検知するコード