useMemoでDOMをメモ化するのってコスパが悪いですか？

Question

前提

CodeSandBox
・1秒ずつカウントアップしていき、現在のカウント数を表示するコンポーネントがあります。
・コンポーネントは現在カウント数のほか、imgやテキストなども含まれています。
・コンソールにレンダリングされた回数が表示されます。

疑問

再レンダリングが必要なのは現在カウント数の部分のみですが、現在カウント数以外の要素も再レンダリングされています。
たまにならいいのですが、再レンダリングしなくてよい要素を1秒毎にレンダリングするのは、なんだか心地が良くないです。

そこでuseMemoで現在カウント数以外の要素をメモ化すれば、1秒毎にカウント数以外の要素を再レンダリングしなくてよいのではないかと考えました。

const otherItems = useMemo(() => (
   <>
      カウント数以外の要素
   </>  
),[])

しかし、useMemoの使い方について諸々とググったのですが、DOMをメモ化している例を見つけられませんでした。
また、メモ化したい要素としたくない要素が入り組んでいる場合は、useMemoを複数回に渡って書かなければいけなさそうで、それはそれで労多くして益少なしという感じがしています。

以上のような場合、DOMをメモ化した方がよいですか？
そもそも上記のケースにおいて、メモ化以外によいパフォーマンスチューニングの方法があればご教示いただきたいです。
DOMのレンダリングなんてたいしたことないからほっとけ、とか、img要素だけはメモ化しとけ、などのご意見もあればいただきたいです。

該当のソースコード

const useCount = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setTimeout(() => setCount(count + 1), 1000);
  }, [count]);
  return count;
};

const App = () => {
  console.count();
  const count = useCount();
  return (
    <>
      <p>{count}</p>
      <div style={box}></div>
      <img style={img} src={onsen} alt="onsen" />
      <p>test</p>
      <input type="range" style={{ width: "100%" }} />
      <button style={button}>button</button>
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/AhmI6KVwNJw"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </>
  );
}