Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

defaultProps is deprecated for fn components #126

Open
Grohden opened this issue May 14, 2024 · 6 comments · May be fixed by #128
Open

defaultProps is deprecated for fn components #126

Grohden opened this issue May 14, 2024 · 6 comments · May be fixed by #128

Comments

@Grohden
Copy link

Grohden commented May 14, 2024

Message from react: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-apis

@ljharb
Copy link
Collaborator

ljharb commented May 14, 2024

Indeed, we should add an option that skips adding the defaultProps, and uses inline defaulting in the function body instead (we can't use parameter default syntax or ??, since babel won't be applied to our output)

@baeroe
Copy link

baeroe commented Jun 28, 2024

Good to read that this issue will be addressed. Any idea when a fix will be released?

@ljharb
Copy link
Collaborator

ljharb commented Jun 28, 2024

Presumably when someone files a PR adding that option (not a fix, because nothing’s broken, especially since react 19 isn’t even out yet)

@hon2a
Copy link

hon2a commented Jul 17, 2024

While it is technically true that nothing is broken, those using this plugin to compile their SVG now have their console chock-full of warnings, which makes it harder to see the more useful content in there. Which is not to say that a call for a PR isn't fair :)

@ryanfiller
Copy link

My job has a script that will fail any tests if they throw unaddressed warnings, so this has actually caused pretty big problems for me.

@Grohden
Copy link
Author

Grohden commented Jul 22, 2024

when I opened the issue I took a little look into how to solve.. but like, I don't really know what level of compatibility is wanted for this one, but if we can use Object.assign, in theory we could do something along these lines (?):

    const defaultProps = SVG_DEFAULT_PROPS_CODE 
          ? `const props = Object.assign({}, SVG_DEFAULT_PROPS_CODE, overrides)` 
          : `const props = overrides`;
    const namedTemplate = `
      var SVG_NAME = function SVG_NAME(overrides) { ${defaultProps}; return SVG_CODE; };
      ${IS_EXPORT ? 'export { SVG_NAME };' : ''}
    `;
    const anonymousTemplate = `
      var Component = function (overrides) { ${defaultProps}; return SVG_CODE; };
      Component.displayName = 'EXPORT_FILENAME';
      export default Component;
    `;

for: https://github.com/airbnb/babel-plugin-inline-react-svg/blob/master/src/index.js#L29-L39

@vieira vieira linked a pull request Aug 30, 2024 that will close this issue
vieira added a commit to vieira/babel-plugin-inline-react-svg that referenced this issue Aug 30, 2024
Drop defaultProps from the generated component as they are now
deprecated and will be removed in React 19.

They were added in airbnb#8 due to concerns about the overhead of `_extends`
although no benchmarks were provided and it is likely that difference
would be marginal where it matters.

Fixes: airbnb#126
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants