I have a screen with two tabs/buttons "Recent" and "Top". When switching between the two, the individual items always reload the data which is unnecessary and causes shifting. I haven't been able to solve this with `useMemo` or anything similar.

How can I make the components not load their data again when switching between tabs:

Example editable in Sandbox: [codesandbox](https://codesandbox.io/s/tailwind-playground-forked-o49vrh)

Edit: I realized I can use CSS to hide the non-active tab or I can load the data at a higher level to prevent the reload - but at the component level, is it possible to stop a reload of the data?

```
import * as React from "react";
import "./styles.css";

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

const Item = ({ title }) => {
  const [itemLoading, setItemLoading] = React.useState(true);

  async function loadItem() {
    await delay((Math.random() * (3 - 1) + 1) * 1000);
    setItemLoading(false);
  }

  React.useEffect(() => {
    loadItem();
  }, []);

  if (itemLoading) {
    return (
      <div className="w-full text-center py-4 border bg-white rounded shadow-lg">
        item is loading ...
      </div>
    );
  } else {
    return (
      <div className="w-full text-center py-4 border bg-white rounded shadow-lg">
        item {title}
      </div>
    );
  }
};

export default function App() {
  const [tab, setTab] = React.useState("Recent");
  const recentItems = ["1", "2", "3", "4", "5", "6", "7", "9"];
  const topItems = ["99", "98", "97", "96", "95", "94", "93"];

  return (
    <div className="w-screen h-screen bg-gray-100">
      <h1 className="text-2xl text-center py-4">Current Tab: {tab}</h1>
      <section className="w-full h-24 grid grid-cols-2">
        <div
          className="cursor-pointer text-center bg-red-200 pt-8"
          onClick={() => {
            setTab("Recent");
          }}
        >
          Recent
        </div>
        <div
          className="cursor-pointer text-center bg-yellow-200 pt-8"
          onClick={() => {
            setTab("Top");
          }}
        >
          Top
        </div>
      </section>

      <section>
        {tab === "Recent"
          ? recentItems.map((item) => <Item key={item} title={item} />)
          : topItems.map((item) => <Item key={item} title={item} />)}
      </section>
    </div>
  );
}

```