React.memo() gave me the error (0 , _components_ComponentName_js__WEBPACK_IMPORTED_MODULE_3__.default) is not a function

Question

The example code is here:

import Button from '@mui/material/Button';
import { memo } from 'react';

function PokemonBriefCard(props) {

  return (
    <div>Some random component</div>
  );
}

export default memo(PokemonBriefCard);
// export default PokemonBriefCard;

The usage of that component is the following:

          <div className="card-brief-container">
            {
              pokemonList.map((pokemon, index) => 
              <div key={index}>
                {PokemonBriefCard({
                  ...pokemon,
                  action: pokemon.favourite ? removeFav : addFav
                })}
              </div>
              )
            }
          </div>

It seems that if I put memo to the component, it would throw an error like this:

And once I remove the memo (like using the export default PokemonBriefCard instead), the project would render without an issue.

Am I using React.memo in the wrong way? I read through the introduction doc but can't find the cause of it.

@OktayYuzcan Thanks for noting, just added the usage to the question. — Terry Windwalker
– Terry Windwalker, Commented Dec 5, 2023 at 10:17

Oki · Accepted Answer · 2023-12-05 14:01:12Z

3

React.memo is used for components. If PokemonBriefCard is a component, you should not call it as function

 PokemonBriefCard({   // this is wrong
     ...pokemon,
     action: pokemon.favourite ? removeFav : addFav
 })

You should use it as a component: <PokemonBriefCard ... />

If it is just a render function PokemonBriefCard(...) (better make the name camel case), then you can't use React.memo, since it is used only on components.

Note: React.memo does not return function, this is why the error tells you it is not a function

edited Dec 5, 2023 at 14:01

answered Dec 5, 2023 at 10:22

Oki

3,3652 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.memo() gave me the error (0 , _components_ComponentName_js__WEBPACK_IMPORTED_MODULE_3__.default) is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related