Objects are not valid as a React child with React.memo

Question

I am receiving the following errors

Warning: memo: The first argument must be a component. Instead received: object

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.

They happen when I change this component

const Tab = () => onLastTab 
    ? <AccountTab data={data.account} />
    : <InfoTab data={data.info} />

To be this component, the only difference is the use of React.memo

const Tab = () => onLastTab 
    ? React.memo(<TabOne data={data.one} />)
    : React.memo(<TabTwo data={data.two} />)

Those components wrapped in React.memo are definately just functional components that look like

const TabOne = ({data}) => (
    <div>
        <div className='d-flex '>
         ...
        </div>
     </div>
 )

---

Why would this be happening? What can I do to stop it?

Answer 1

As the error message explains, you need to pass component to the React.memo(), not an object. TabOne is obviously a component name but you already created an object of that component and passed it through the React.memo(). You need fix your code as follows:

const TabOne = ({data}) => (
    <div>
        <div className='d-flex '>
         ...
        </div>
     </div>
 )
export default React.memo(TabOne)

const Tab = () => onLastTab 
    ? <TabOne data={data.one} />
    : <TabTwo data={data.two} />