React's defaultProps will be remove from function components in a future release

[Th1nkK1D]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• [ ] All
• [ ] Angular
• [ ] HTML
• [ ] Preact
• [ ] Qwik
• [X] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

Reproduction case

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMAi6BmBDZAGxgAUoIxU4BfOHckOAcgAEAjZYQgE3SgDpgEAPQhgMCKmComAbgBQ84ADsYffAGN0cMhSoJ5cOADc8hZOgD8ALjioYUFQHMF1RegAekWHF74i8DjIyhowQspwALIAngDCEOAQyuiqABRg5JS2upQAlIiGKBjY%2FsQ5qKkGRkam5ui2TAAW6ISEEEwANIXUuQqFUOgwyFARADzcwMYAfAgZevy1FtSjwhPTrkA

Expected Behaviour

Default props are defined with ES6 default parameters.

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent({ value: "hello" }: Props) {
  return <div>{value}</div>;
}

export default MyComponent;

PS. The playground doesn't not support TypeScript at the monent.

Actual Behaviour

Using defaultProps which will be removed in React 19.

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent(props: Props) {
  return <div>{props.value}</div>;
}

MyComponent.defaultProps = { value: "hello" };

export default MyComponent;

The error was also shown in the console.

Additional Information

defaultProps will be removed in place of ES6 default parameters in React 19 https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops

[manucorporat]

Props destructuring might be a bit complicated to implement, in the meantime, i suggest to do:

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent(props Props) {
  props = {
    ...props,
    value: props.value ?? "hello",
  }
  return <div>{props.value}</div>;
}

export default MyComponent;

however, i agree the props destructuring way is better, beautiful and more idiomatic

[WesselSmit]

@manucorporat This does not work as

  props = {
    ...props,
    value: props.value ?? "hello",
  }

is entirely removed from the compiled output. The same happens if I try to assign it a new variable e.g.

  const defaultedProps = {
    ...props,
    value: props.value ?? "hello",
  }

and results in

function MyComponent(props: Props) {
  return <div>{props.value}</div>; // <-- 'props.value' is possibly 'undefined'
}

I am using the latest version of mitosis and mitosis-cli (0.3.9).

[samijaber]

@WesselSmit , Manu is suggesting how to implement the default props within the react generator, not how to write the Mitosis component.

[WesselSmit]

@samijaber Ah check. My bad, I missed that.