Rule `require-default-props` does not support default parameters in stateless function

[preco21]

Hello, I just got some error from require-default-props rule:

`react/require-default-props`:  propType "foo" is not required, but has no corresponding defaultProp declaration.
`react/require-default-props`:  propType "baz" is not required, but has no corresponding defaultProp declaration.

Here is the code:

function Header({
  foo = true,
  bar,
  baz = () => { /* noop */ },
}) {
  return ...;
}

Header.propTypes = {
  foo: PropTypes.bool,
  bar: PropTypes.bool.isRequired,
  baz: PropTypes.func,
};

I expected there is no error, but seems it causes the problem.

Any ideas?

[ljharb]

Default values are not the same as defaultProps. The rule correctly reports this as an error.

[preco21]

If so..

But I guess this kind of pattern is commonly used on stateless functions. So, this is reasonable to me.

In order to realize this pattern works, may I request another rule or option?

[ljharb]

That's why it's an important rule - it's bad to use default values instead of defaultProps.

I suppose we could make an option that allows default values but I think the existence of the option would be harmful.

[steida]

@ljharb Correct me if I am wrong, but this rule is unnecessary when we use flowtype.

[ljharb]

@steida i don't understand why it would be - defaultProps provide important information to the React runtime that default values can't possibly provide. Flowtype replaces propTypes - information that React doesn't actually use at runtime in production.

[steida]

Yeah, but if you have flowtyped everything, you need runtime checking only at application boundaries.

[ljharb]

@steida again, you're talking about propTypes. defaultProps are different, and control runtime behavior - not type-checking. Using default values prevents React from being able to make some kinds of optimizations.

[steida]

I don't want to use defaulProps https://twitter.com/estejs/status/812491172438560769

[steida]

As for optimizations, link pls?

[ljharb]

@steida There's no need for a link - by spec, default values are re-evaluated on every invocation of the function. defaultProps, on the other hand, are evaluated once and cached at the module level - across every invocation of the function. Even if React does nothing with regard to them (which I doubt, but haven't bothered to dig up evidence of), defaultProps are more performant than default values.

If you don't want to use defaultProps, disable this rule. If you want flow annotations to be equivalent, make sure that your Flow annotations transpile down to defaultProps, and then this rule can and should be adapted to support them - until that time, they're not the same, and defaultProps is staunchly recommended.

[bradennapier]

Hmm - yet the documentation for Flow / React specifically tell you to use default values this way and actually would not support propTypes.

// @ https://flow.org/en/docs/frameworks/react/
let MyComponent = ({ foo, bar = 2 }: { foo: number, bar?: number }) => {
  return <div>{foo + bar}</div>;
};

[ljharb]

The documentation for React suggests a number of bad practices amidst all the good ones - just because they make the framework doesn't mean they're always right :-)

[bradennapier]

#truth -- I switched to using defaultProps already and working well. Would be cool to have a plugin to automatically convert to defaultProps in this situations -- although I know there could be times default parameters are the desired effect (when it executes a function, etc).

[AlexanderTserkovniy]

Hi guys,

In my opinion there should be at least an option to tell that require-default-props should pass if there is default parameter is set.

const Button = ({
  children = 'Cancel', intent = 'primary', className, size, loading = false, ...rest
}) => (
  <button
    {...rest}
    className={classnames(styles[intent], className, {
      [styles[`size-${size}`]]: size,
      [styles['loading-disabled']]: rest.disabled && loading,
    })}
  >
    {loading ? <Spinner height="100%" /> : children}
  </button>
);

intent in this case has default parameter (defaultProp). I do not want to repeat myself, if I write default parameter for some property in function arguments that should be considered as defaultProp.

Would you be so kind to add this option?