如何在具有命名导出的文件中使用 React.memo()？

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

Answer 3

Exports that aren't default need to be named.

const MemoizedMainPostTopic = React.memo(MainPostTopic)
export {MemoizedMainPostTopic};

Answer 4

You just need to give name to the object properties you are exporting.

const MainPostTopicComponent = React.memo(MainPostTopic);
const MainPostSubtopicComponent = React.memo(MainPostSubtopic)

export {
  MainPostTopicComponent,
  MainPostSubtopicComponent 
};

Hope this can help!

Answer 5

Using memo with default:

import { memo } from "react";
const Todos = ({ todos }) => {
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default memo(Todos);

Now only if the todos property changed the component will re-render