How to use React.memo() in a file with named exports?

Question

I'm used to export default React.memo(SomeComponent); so React can memoize my components.

But in a file where I'm using named exports. How can I use React.memo() ?

export {React.memo(MainPostTopic), React.memo(MainPostSubtopic)};

The line above doesn't work.

EXAMPLE FILE

function MainPostTopic(props) {
  console.log('Rendering MainPostTopic...');
  return(
    <LS.Topic_H2 id={props.id}>
      {props.value}
    </LS.Topic_H2>
  );
}

function MainPostSubtopic(props) {
  console.log('Rendering MainPostSubtopic...');
  return(
    <LS.Subtopic_H3>
      {props.value}
    </LS.Subtopic_H3>
  );
}

export {MainPostTopic, MainPostSubtopic};

Answer 1

This is what I've ended up doing:

const MainPostTopic = React.memo(
  function MainPostTopic(props) {
    console.log('Rendering MainPostTopic...');
    return(
      ...
    );
  }
);

const MainPostSubtopic= React.memo(
  function MainPostSubtopic(props) {
    console.log('Rendering MainPostSubtopic...');
    return(
      ...
    );
  }
);

export {MainPostTopic, MainPostSubtopic};

I kept the same name for the functions and the exports.

Answer 2

Try

export const MemoMainPostTopic = React.memo(MainPostTopic);

or

const MainPostTopic = memo(() => {
 ...
})
export { MainPostTopic };