jsx-props-no-spreading

Try in Playground
react-best-practicesBest PracticeInformational

0

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

Log in to add a comment


    Be the first one to leave a comment!

Codiga Logo
Codiga Hub
  • Rulesets
  • Playground
  • Snippets
  • Cookbooks
soc-2 icon

We are SOC-2 Compliance Certified

G2 high performer medal

Codiga – All rights reserved 2022.