I'm in a situation just like this where I need to toggle between two components, both components can get significantly heavy so I memoized them.

Following the first comment from the link above, I'm using the useMemo() hook in the parent of both components so I can show/hide a particular component:

function myComponent() {
  const [activeTab, setActiveTab] = useState('Books');

  const MemoizedBooks = useMemo(() => <Books />, []);
  const MemoizedRequests = useMemo(() => <Requests />, []);
  
  return (
      <div>{activeTab === 'Books' ? MemoizedBooks : MemoizedRequests}</div>
  )
}

The problem/question

If the <Books/> component updates itself for instance, how will the parent myComponent know of this update and then update memoizedBooks?