Prevent mapped components in conditional from reloading? - reactjs

Question

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
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>
);
}

Answer 1

Every time tab state changes, array.map is invoked and creates a new array of react components:
{tab === "Recent"
? recentItems.map((item) => <Item key={item} title={item} />)
: topItems.map((item) => <Item key={item} title={item} />)}
And everytime a new component is created, the code you've provided tries to fetch data with async call and ReactDOM re-renders the table. Data fetching part should be seperate from component if speed is a constraint.
You can achive that by either moving the data state up to upper component(in your case App) or handle it seperately elsewhere. First option is recommended.

Answer 2

The way I solved this without moving the data loading further up, is to set the height and width of the tabs to 0, and mark them as hidden (unless it it the current tab). This got rid of all double loading and cumulative layout shift without modify lots of code.
(tailwind)
const hiddenClass = "w-0 h-0 hidden"
<div className={currentTab === "Recent" ? undefined : hiddenClass} >
...recent items
</div>
<div className={currentTab === "Popular" ? undefined : hiddenClass} >
...popular items
</div>