How to fix React.memo requires a function component in React

ReactINTERMEDIATEMEDIUM

This error occurs when trying to wrap a non-component value with React.memo, such as class components, string literals, or other invalid types. React.memo is specifically designed for function components and expects a valid React component as its argument to enable memoization.

What this error means

React.memo is a higher-order component (HOC) that memoizes a component to prevent unnecessary re-renders when props haven't changed. However, it only works with valid React function components and forwardRef-wrapped components. When you pass something that isn't a valid component—such as a string, object, class component, or any other value—React cannot determine what to memoize and throws this error. The error represents a type mismatch between what React.memo expects (a function component or forwardRef) and what you're actually providing. React.memo needs a callable function that returns JSX to wrap with its memoization logic. Class components should use React.PureComponent or shouldComponentUpdate instead, as they have different lifecycle mechanisms that don't work with the memoization pattern React.memo implements. Understanding this error is important because React.memo is a performance optimization tool, and knowing its constraints helps you apply memoization correctly throughout your codebase.

How to fix "React.memo requires a function component"

1Verify you're wrapping a function component with React.memo

Ensure that what you're passing to React.memo is a valid function component. The component must be a function that returns JSX.

Bad - Wrapping a non-component value:

javascript

const MyValue = { name: 'test' };
const Memoized = React.memo(MyValue); // ❌ Error!

Good - Wrapping a function component:

javascript

function MyComponent(props) {
  return <div>{props.name}</div>;
}
const Memoized = React.memo(MyComponent); // ✓ Correct

Also good - Arrow function component:

javascript

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};
const Memoized = React.memo(MyComponent); // ✓ Correct

2Convert class components to function components for memoization

React.memo only works with function components. If you're trying to memoize a class component, use React.PureComponent or shouldComponentUpdate instead.

Bad - Trying to memo a class component:

javascript

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}
const Memoized = React.memo(MyComponent); // ❌ Error!

Good - Class component with PureComponent:

javascript

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

Good - Convert to function component with memo:

javascript

function MyComponent(props) {
  return <div>{props.name}</div>;
}
const Memoized = React.memo(MyComponent); // ✓ Correct

Good - Class with custom shouldComponentUpdate:

javascript

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return !Object.is(this.props, nextProps) || !Object.is(this.state, nextState);
  }
  
  render() {
    return <div>{this.props.name}</div>;
  }
}

3Ensure you're exporting the correct component

Verify that you're exporting the component function itself, not a configuration object or other value.

Bad - Exporting wrong value:

javascript

const config = { component: MyComponent };
export const Memoized = React.memo(config); // ❌ Error!

Good - Export the component:

javascript

function MyComponent(props) {
  return <div>{props.name}</div>;
}
export const Memoized = React.memo(MyComponent); // ✓ Correct

Good - Default export:

javascript

function MyComponent(props) {
  return <div>{props.name}</div>;
}
export default React.memo(MyComponent); // ✓ Correct

Good - Named export:

javascript

const MyComponent = (props) => <div>{props.name}</div>;
export const MemoizedComponent = React.memo(MyComponent); // ✓ Correct

4Use forwardRef when memoizing components that receive refs

If you need to memoize a component that receives a ref prop, wrap it with forwardRef first, then memo.

Bad - Trying to memo component with ref:

javascript

const MyComponent = (props, ref) => {
  return <input ref={ref} {...props} />;
};
const Memoized = React.memo(MyComponent); // ❌ Refs not forwarded

Good - forwardRef first, then memo:

javascript

const MyComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});
const Memoized = React.memo(MyComponent); // ✓ Correct

Good - Single line:

javascript

const Memoized = React.memo(
  React.forwardRef((props, ref) => (
    <input ref={ref} {...props} />
  ))
);

5Check your imports are correct

Ensure you're importing React correctly and using React.memo, not a misspelled or incorrectly imported version.

Bad - Incorrect import:

javascript

import { memo } from 'react';
const MyComponent = () => <div>Hello</div>;
const Memoized = memo(myConfig); // If myConfig isn't a component

Good - Using React.memo:

javascript

import React from 'react';
const MyComponent = () => <div>Hello</div>;
const Memoized = React.memo(MyComponent); // ✓ Correct

Good - Importing memo directly:

javascript

import { memo } from 'react';
const MyComponent = () => <div>Hello</div>;
const Memoized = memo(MyComponent); // ✓ Correct

6Custom comparison function must be a function

React.memo's second argument is an optional custom comparison function. If you provide it, it must be a function that receives two props objects and returns a boolean.

Bad - Invalid comparison argument:

javascript

const MyComponent = (props) => <div>{props.name}</div>;
const Memoized = React.memo(MyComponent, { custom: true }); // ❌ Must be a function

Good - Custom comparison function:

javascript

const MyComponent = (props) => <div>{props.name}</div>;
const Memoized = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id; // Return true if props are equal
}); // ✓ Correct

Good - No custom comparison (default shallow comparison):

javascript

const MyComponent = (props) => <div>{props.name}</div>;
const Memoized = React.memo(MyComponent); // ✓ Correct

7Avoid wrapping children or dynamic values with memo

React.memo only memoizes the component itself, not what's inside it. Don't try to memo children props or context values.

Bad - Trying to memo children:

javascript

const MyComponent = (props) => {
  const MemoChild = React.memo(props.children); // ❌ Wrong!
  return <div>{MemoChild}</div>;
};

Good - Memoize the component that renders children:

javascript

const MyComponent = React.memo((props) => {
  return <div>{props.children}</div>;
}); // ✓ Correct - Component is memoized

Good - Extract children as separate memoized component:

javascript

const ChildRenderer = React.memo(({ children }) => (
  <div>{children}</div>
));

const MyComponent = (props) => {
  return <ChildRenderer>{props.children}</ChildRenderer>;
}; // ✓ Correct

How to fix React.memo requires a function component in React

What this error means

Typical symptoms

Common causes

How to fix "React.memo requires a function component"

Advanced notes

Related errors

Official resources & further reading