Eslint-plugin-react: `defaultProps` rule to be deprecated on function components

[amypellegrini]

defaultProps on function components is getting deprecated by React (see: https://github.com/facebook/react/pull/16210)

For this rule to follow suit, it should only be triggered when missing from class components.

The official recommendation in future versions of React is to use ES6 default values for function components.

[ljharb]

That won't change by default; there can be an option to ignore function components, however.

[KevinGhadyani-minted]

Is there a way to check the deconstructed values for default props instead?

[ljharb]

@KevinGhadyani-minted I'm not sure what you're asking.

[KevinGhadyani-minted]

The change isn't to remove defaultProps from function components, but to use the official ES6 standard for defaulting props using object deconstruction and default assignment.

Where we once had:

const TestComponent.defaultProps = {
  size: 'medium',
  type: 'primary',
}

We now have:

const TestComponent = ({
  size = 'medium',
  type = 'primary',
}) => (
  // ...
)

The goal isn't to remove defaultProps, but change how they're defined on function components.

I would expect the defaultProps rules to function the same regardless of if I use defaultProps or object deconstruction and default assignment.

[ljharb]

That's something that should be configurable via an option, as I said above.

[KevinGhadyani-minted]

I think I'm confused then. In your comment, you said there _can_ be an option to ignore it for function components.

To me, this means there's development that would occur to disable it for function components, but this development has not occurred. It doesn't say there'd be an alternative for getting it to identify ES2015 default assignment instead.

[ljharb]

Yes, it means someone would have to do the development work to add an option.

It makes sense to me to modify require-default-props so that the default is "defaultProps" for everything, but that there's an option for function components to instead require "default arguments", or, to ignore function components.

[aaronmccall]

@ljharb, I'm considering working on the addition you suggested above, is there a good place to start beyond looking at the current rule implementation?

[ljharb]

@aaronmccall That, and its tests, are pretty much it :-)

[nknaveen007]

if you are using a state ,then use the default values like below,
const BlogPostForm=({onSubmit,initialValues=()=>{initialValues.title='',initialValues.content=''}})=>{ //default values set in a function

const [title,setTitle]=useState(initialValues.title)
const [content,setContent]=useState(initialValues.content)