Fixing the 'defaultProps' Deprecation Warning in React 18.3 and 19

TL;DR: The Quick Fix

Stop using the Component.defaultProps property. Instead, move your default values directly into the function signature using standard JavaScript syntax.

Before:

function Button({ label, color }) {
  return <button style={{ color }}>{label}</button>;
}

Button.defaultProps = {
  color: 'blue',
  label: 'Click me'
};

After:

function Button({ label = 'Click me', color = 'blue' }) {
  return <button style={{ color }}>{label}</button>;
}

Why is React making this change?

React 18.3 acts as a bridge to version 19. It introduces this warning to give developers time to refactor before the feature is officially removed. The React team is streamlining the library by removing redundant patterns. Since ES6 default parameters are now standard in JavaScript, maintaining a React-specific defaultProps for function components no longer makes sense.

Native defaults are more efficient. They reduce the overhead React needs to manage and make your code easier for IDEs like VS Code to analyze. Note that this change only affects function components. Class components will keep defaultProps support for the foreseeable future.

Refactoring Common Patterns

1. Standard Destructuring

Most modern components already destructure props. If you aren't doing this yet, now is the perfect time to start. It makes your component's dependencies clear at a glance.

// ❌ Old way
const UserProfile = (props) => {
  return <div>{props.name}</div>;
};
UserProfile.defaultProps = { name: 'Guest' };

// ✅ New way
const UserProfile = ({ name = 'Guest' }) => {
  return <div>{name}</div>;
};

2. Working with TypeScript

When using TypeScript, mark your props as optional in the interface using the ? operator. Then, assign the default value during destructuring. This ensures your types stay accurate while satisfying the new React requirements.

interface Props {
  title?: string;
  isAdmin?: boolean;
}

const Header = ({ title = 'Welcome', isAdmin = false }: Props) => {
  return (
    <header>
      <h1>{title}</h1>
      {isAdmin && <span>Admin Dashboard</span>}
    </header>
  );
};

3. Handling forwardRef and memo

Higher-Order Components (HOCs) like React.memo or forwardRef often trip people up. The fix is the same: keep the defaults inside the inner function signature where the props are actually received.

const CustomInput = React.forwardRef(({ type = 'text', placeholder = 'Enter text...' }, ref) => {
  return <input ref={ref} type={type} placeholder={placeholder} />;
});

What if the error is in a library?

You might see this warning even if your own code is perfect. High-profile libraries like Recharts, Material UI (older versions), and React Bootstrap have historically relied on defaultProps. In fact, Recharts users saw this frequently until version 2.13.0.

• Update immediately: Run npm update. Most maintainers have already released patches for React 19 compatibility.
• Identify the culprit: Look at the component name in the warning. If it's something like <XAxis> or <ResponsiveContainer>, the issue is inside your node_modules.
• Wait or Patch: If the library is abandoned, you may need to use patch-package or transition to a more modern alternative before upgrading to React 19.

How to verify the fix

• Refresh in Dev Mode: These warnings only trigger in development mode. Refresh your browser and watch the console.
• Check specific triggers: Navigate to the specific route where the component renders. Some warnings only fire when a component actually mounts.
• Test Prop Overrides: Ensure that passing a prop manually still overrides your new default value. For example, <Button color="red" /> should still render red, not the default blue.