useSolidForComponent

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/performance/useSolidForComponent`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`solid`](/linter/domains#solid) - Sources: - Inspired from [`solid/prefer-for`](https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-for.md)

How to configure

json

{
	"linter": {
		"rules": {
			"performance": {
				"useSolidForComponent": "error"
			}
		}
	}
}

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

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:33 <a href="https://biomejs.dev/linter/rules/use-solid-for-component">lint/performance/useSolidForComponent</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ 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 <For /> component for efficiently rendering lists. See <a href="https://docs.solidjs.com/reference/components/for">Solid docs</a> for more details. </code></pre>

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:31 <a href="https://biomejs.dev/linter/rules/use-solid-for-component">lint/performance/useSolidForComponent</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ 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 <For /> component for efficiently rendering lists. See <a href="https://docs.solidjs.com/reference/components/for">Solid docs</a> for more details. </code></pre>

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:3:6 <a href="https://biomejs.dev/linter/rules/use-solid-for-component">lint/performance/useSolidForComponent</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ 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 <For /> component for efficiently rendering lists. See <a href="https://docs.solidjs.com/reference/components/for">Solid docs</a> for more details. </code></pre>

Valid

jsx

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

jsx

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

jsx

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

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Valid

Related links