noDestructuredProps

JavaScript (and super languages)

Summary

• Rule available since: v2.0.0
• Diagnostic Category: lint/nursery/noDestructuredProps
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • solid
• Sources:
  • Inspired from solidjs/no-destructure

Caution

This rule is part of the nursery group.

Description

Disallow destructuring props inside JSX components in Solid projects.

In Solid, props must be used with property accesses (props.foo) to preserve reactivity.

Examples

Invalid

let Component = ({}) => <div />;

code-block.jsx:1:18 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ You cannot destructure props.
  
  > 1 │ let Component = ({}) => <div />;
      │                  ^^
    2 │ 
  
  ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
  
  ℹ Remove the destructuring and use props.foo instead.
  

let Component = ({ a: A }) => <div a={A} />;

code-block.jsx:1:39 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This variable shouldn’t be destructured.
  
  > 1 │ let Component = ({ a: A }) => <div a={A} />;
      │                                       ^
    2 │ 
  
  ℹ This is where the props were destructured.
  
  > 1 │ let Component = ({ a: A }) => <div a={A} />;
      │                  ^^^^^^^^
    2 │ 
  
  ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
  
  ℹ Remove the destructuring and use props.foo instead.
  

let Component = ({ prop1 }: Props) => <div p1={prop1} />;

code-block.tsx:1:48 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This variable shouldn’t be destructured.
  
  > 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
      │                                                ^^^^^
    2 │ 
  
  ℹ This is where the props were destructured.
  
  > 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
      │                  ^^^^^^^^^
    2 │ 
  
  ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
  
  ℹ Remove the destructuring and use props.foo instead.
  

Valid

let Component = (props) => <div />;

let Component = (props) => <div a={props.a} />;

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noDestructuredProps": "error"
      }
    }
  }
}

Related links

• Disable a rule
• Configure the code fix
• Rule options