useForComponent

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/useForComponent
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/perfer-for

Description

Enforce using Solid’s <For /> component for mapping an array to JSX elements.

In Solid, <For /> component for efficiently rendering lists. Array#map causes DOM elements to be recreated.

For details on <For /> Component, see the Solid docs about Components.

Examples

Invalid

1
let Component = (props) => <ol>{props.data.map(d => <li>{d.text}</li>)}</ol>;

code-block.jsx:1:33 lint/nursery/useForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
  > 1 │ let Component = (props) => <ol>{props.data.map(d => <li>{d.text}</li>)}</ol>;
      │                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use Solid’s <Emphasis></Emphasis> component for efficiently rendering lists. See Solid docs for more details.

1
let Component = (props) => <>{props.data.map(d => <li>{d.text}</li>)}</>;

code-block.jsx:1:31 lint/nursery/useForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
  > 1 │ let Component = (props) => <>{props.data.map(d => <li>{d.text}</li>)}</>;
      │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use Solid’s <Emphasis></Emphasis> component for efficiently rendering lists. See Solid docs for more details.

1
let Component = (props) => (
2
  <ol>
3
    {props.data.map((d) => (
4
      <li key={d.id}>{d.text}</li>
5
    ))}
6
  </ol>
7
);

code-block.jsx:3:6 lint/nursery/useForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
    1 │ let Component = (props) => (
    2 │   <ol>
  > 3 │     {props.data.map((d) => (
      │      ^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │       <li key={d.id}>{d.text}</li>
  > 5 │     ))}
      │     ^^
    6 │   </ol>
    7 │ );
  
  ℹ Use Solid’s <Emphasis></Emphasis> component for efficiently rendering lists. See Solid docs for more details.

Valid

1
let Component = (props) => <ol><For each={props.data}>{d => <li>{d.text}</li>}</For></ol>;

1
let abc = x.map(y => y + z);

1
let Component = (props) => {
2
 let abc = x.map(y => y + z);
3
 return <div>Hello, world!</div>;
4
}

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useForComponent": "error"
6
      }
7
    }
8
  }
9
}