Rule idea: no spreading props

[mockdeep]

One thing we've noticed tends to make code a little opaque is when we destructure the entire props for a sub-component:

function MyComponent(props) {
  return <MySubComponent {...props} />
}

It would be great to have an eslint rule to force expanding individual props that should be passed down:

function MyComponent(props) {
  return <MySubComponent one_prop={props.one_prop} two_prop={props.two_prop} />
}

[ljharb]

In other words, forbidding spread props, but just of the entire props object?

This seems pretty useful. I'd actually want to forbid spread props in all cases, so that maybe could be configurable.

[mockdeep]

Yeah, a configuration would be good, I think. Sometimes we like to assign local props or use a function to pull them out, which I think we'd like to still be able to do.

function MyComponent(props) {
  return <MySubComponent {...subComponentProps(props)} />
}

function subComponentProps(props) {
  return {
    one_prop,
    two_prop: two_prop * 2
  };
}

Haven't landed on a clear style for that, though.

[thoiberg]

If no one else is actively working on this I wouldn't mind taking a shot. I've run into a few cases where as components have grown using {...this.props} has ended up passing in 10 props to a child component when it only needs 3.

[ljharb]

@thoiberg you can use https://npmjs.com/prop-types-exact on each of your components to help catch that, but the linter rule is also great :-)

[sanjayp]

Just adding that I'd like to see this rule added as well since there are potential performance implications, as noted here: https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02#63e7.

[benmonro]

@thoiberg did you ever get anywhere on this?

[thoiberg]

@benmonro no sorry, I got a little way's in but work got in the way 😞. Feel free to take over if you have the desire 😄

[iegik]

I think that rule was about to not use this syntax:

<Foo {...{
  bar: 'tar',
  moo: 0,
}} />

and use that instead:

<Foo
  bar="tar"
  moo={0}
/>

Reasons:

1. as mentioned in @sanjayp's comment
2. only one syntax must be preferred

[iegik]

@mockdeep

function MyComponent(props) {
  return <MySubComponent {...subComponentProps(props)} />
}

->

function MyComponent(props) {
  const { one_prop, two_prop } = subComponentProps(props);

  return <MySubComponent one_prop={one_prop} two_prop={two_prop} />
}