so I have some tabs that do lots of queries using axios on useEffect and it only needs to be ran once, when the user's on the page.

return <>{activeTab === "News" ? <NewsToday/> : activeTab === "Animals" ? <Animals/> : <Profile/>}</>;

So as you can see, when activeTab switches, it unmounts the previously active component and mounts the active ones. This works, but it also means that it will requery everything inside of the component.

Does anyone have a suggestion to make the queries inside to not run again?

I know I can fix this via css like setting the display to none, but I would want to hear better ideas or approach