jsx-props-no-spreading

Daniel StrongBest PracticeInformational

No tags

No CWE or CVE

This rule warns when you're using spread props.

By avoiding this, you can enhance your code readability because you are being more explicit about what props are sent and received.

It is also good for maintainability as you're not unintentionally passing extra, unneeded props.

View a similar ESLint rule.

Pattern Rule: \{...${props}\}

jsx-props-no-spreading

How to write a rule

function visit(pattern, filename, code) {
	return;
  const error = buildError(
  	pattern.start.line,
    pattern.start.col,
    pattern.end.line,
    pattern.end.col,
    `Instead of spreading props, be more explicit and set your values to improve readability`,
    "INFO",
    "BEST_PRACTICES"
  )
  addError(error)
}

invalid-spreading.jsx

Expected test result: has error

function Container(props){
  const rest = props
  const restOfProps = rest
  
  return (
    <div>
      <div {...props} />
      <div {...rest} />
      <div {...restOfProps} />
      <div {...rest, ...props} />
	  </div>
  )
}

valid-example.jsx

Expected test result: no error

function Container(props){
  const rest = props
  const restOfProps = { a: "a", ...rest }
  
  return (
    <div>
      <div />
	  </div>
  )
}

Add comment

Be the first one to leave a comment!