How to fix Warning: defaultProps will be removed from functional components in a future version in React

ReactBEGINNERLOWUpdated Dec 9, 2025· 177 views

React 18.3+ warns that defaultProps support will be removed from function components in future releases. This deprecation encourages migration to ES6 default parameters, which offer better TypeScript integration and align with modern JavaScript standards.

Quick fix

Fixes Warning: defaultProps will be removed from functional components in a future version

interface Props {
  name: string;
  age: number;
  greeting: string;
}

function UserProfile(props: Props) {
  return <div>{props.greeting}, {props.name}!</div>;
}

UserProfile.defaultProps = {
  greeting: 'Hello'
};
  1. Replace defaultProps with ES6 default parameters
  2. Handle complex default values
  3. Update TypeScript interfaces
  4. Use automated migration tools
react — error
interface Props {
  name: string;
  age: number;
  greeting: string;
}
function UserProfile(props: Props) {
  return <div>{props.greeting}, {props.name}!</div>;
}
UserProfile.defaultProps = {
  greeting: 'Hello'
};
Warning: defaultProps will be removed from functional components in a future version

What this error means

This deprecation warning appears when you use the `defaultProps` pattern on function components in React 18.3 or later. React is phasing out this legacy API in favor of ES6 default parameters. The `defaultProps` feature was introduced in early React versions before ES6 default parameters were widely adopted. With modern JavaScript, destructuring props with default values provides a cleaner, more efficient alternative that works seamlessly with TypeScript and modern tooling. While the warning won't break your application, it signals that future React versions (particularly React 19+) will remove defaultProps support for function components entirely. Class components will continue to support defaultProps since they don't have an ES6 alternative.

Typical symptoms

  • Console warning: "Support for defaultProps will be removed from function components in a future major release"
  • Warning appears during development when using MyComponent.defaultProps pattern
  • ESLint warnings if using react/no-default-props rule
  • TypeScript showing deprecation notices for defaultProps on function components
  • Build warnings in React 18.3+ projects using legacy default props pattern

Common causes

  1. Using MyComponent.defaultProps = {...} on a function component in React 18.3+
  2. Legacy codebase not migrated to ES6 default parameters
  3. Third-party libraries still using deprecated defaultProps pattern
  4. Copy-pasting old React patterns from pre-ES6 tutorials
  5. Upgrading to React 18.3+ without updating component prop handling

How to fix "Warning: defaultProps will be removed from functional components in a future version"

1Replace defaultProps with ES6 default parameters

Migrate from the legacy pattern to destructured parameters with defaults:

Before (deprecated):

tsx
interface Props {
  name: string;
  age: number;
  greeting: string;
}

function UserProfile(props: Props) {
  return <div>{props.greeting}, {props.name}!</div>;
}

UserProfile.defaultProps = {
  greeting: 'Hello'
};

After (recommended):

tsx
interface Props {
  name: string;
  age: number;
  greeting?: string; // Mark as optional
}

function UserProfile({
  name,
  age,
  greeting = 'Hello' // ES6 default parameter
}: Props) {
  return <div>{greeting}, {name}!</div>;
}

This approach works for both JavaScript and TypeScript and provides better type safety.

2Handle complex default values

For object or array defaults, use the same destructuring pattern:

tsx
interface Props {
  user: {
    name: string;
    role?: string;
  };
  config?: {
    theme: string;
    locale: string;
  };
}

function Dashboard({
  user,
  config = { theme: 'dark', locale: 'en' } // Object default
}: Props) {
  return (
    <div>
      {user.name} - {config.theme} theme
    </div>
  );
}

For nested destructuring with defaults:

tsx
function Settings({
  config: {
    theme = 'light',
    locale = 'en'
  } = {} // Fallback for undefined config
}) {
  return <div>Theme: {theme}</div>;
}
3Update TypeScript interfaces

Make props optional in TypeScript when they have defaults:

tsx
// Mark defaulted props as optional with ?
interface ButtonProps {
  label: string;        // Required
  variant?: 'primary' | 'secondary'; // Optional with default
  size?: 'sm' | 'md' | 'lg';         // Optional with default
  disabled?: boolean;                 // Optional with default
}

function Button({
  label,
  variant = 'primary',
  size = 'md',
  disabled = false
}: ButtonProps) {
  return (
    <button className={`btn-${variant} btn-${size}`} disabled={disabled}>
      {label}
    </button>
  );
}

This ensures consumers can omit optional props without TypeScript errors.

4Use automated migration tools

For large codebases, use codemods to automate the migration:

Option 1: React-codemod

bash
npx react-codemod default-props-to-default-parameters src/

Option 2: Manual find and replace
Search for patterns like:

bash
# Find all defaultProps usage
grep -r ".defaultProps" src/

Then refactor each occurrence to use ES6 defaults.

Option 3: ESLint rule
Enable the rule to catch remaining instances:

json
{
  "rules": {
    "react/no-default-props": ["error", {
      "functionalComponents": "error"
    }]
  }
}
5Verify component behavior after migration

Test that default values work correctly:

tsx
import { render, screen } from '@testing-library/react';

function Greeting({ name = 'Guest' }: { name?: string }) {
  return <h1>Hello, {name}!</h1>;
}

test('uses default name when prop not provided', () => {
  render(<Greeting />);
  expect(screen.getByText('Hello, Guest!')).toBeInTheDocument();
});

test('uses provided name when prop is given', () => {
  render(<Greeting name="Alice" />);
  expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();
});

Ensure undefined vs null behavior matches expectations.

Advanced notes

Class components vs function components:
Class components will continue to support defaultProps indefinitely because they lack an ES6 alternative. Only function components are affected by this deprecation.

Null vs undefined behavior:
ES6 defaults only apply when a prop is undefined. If you explicitly pass null, the default won't apply:

tsx
function Example({ value = 'default' }: { value?: string | null }) {
  return <div>{value}</div>;
}

<Example />           // Renders "default"
<Example value={undefined} /> // Renders "default"
<Example value={null} />      // Renders empty (null !== undefined)

To handle null, use nullish coalescing:

tsx
function Example({ value }: { value?: string | null }) {
  const displayValue = value ?? 'default';
  return <div>{displayValue}</div>;
}

Merging default objects:
For deep default objects, consider a merge utility:

tsx
import { merge } from 'lodash';

function Component({ config }: { config?: Partial<Config> }) {
  const fullConfig = merge({}, DEFAULT_CONFIG, config);
  // ...
}

React 19 changes:
React 19 completely removes defaultProps support for function components. Code using defaultProps will throw errors rather than warnings. Plan migration before upgrading to React 19.

ForwardRef components:
For components using forwardRef, apply defaults in the inner function:

tsx
const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ placeholder = 'Enter text...', ...props }, ref) => {
    return <input ref={ref} placeholder={placeholder} {...props} />;
  }
);

Frequently asked questions

What does "Warning: defaultProps will be removed from functional components in a" mean?
3 or later. React is phasing out this legacy API in favor of ES6 default parameters. The defaultProps feature was introduced in early React versions before ES6 default parameters were widely adopted.
How do I fix "Warning: defaultProps will be removed from functional components in a"?
React 18.3+ warns that defaultProps support will be removed from function components in future releases. This deprecation encourages migration to ES6 default parameters, which offer better TypeScript integration and align with modern JavaScript standards.
What causes "Warning: defaultProps will be removed from functional components in a"?
Using MyComponent.defaultProps = {...} on a function component in React 18.3+ Legacy codebase not migrated to ES6 default parameters Third-party libraries still using deprecated defaultProps pattern
Is the "Warning: defaultProps will be removed from functional components in a" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading