noSvelteUselessDerivedBy (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noSvelteUselessDerivedBy
This rule has a safe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/prefer-derived-over-derived-by

How to configure

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

Description

Disallow $derived.by() when $derived() is sufficient.

$derived.by() is only needed when a derivation requires statements, such as loops, intermediate variables, or side effects. When the function passed to $derived.by() only returns a single expression, passing that expression to $derived() directly is shorter and behaves the same way.

The rule reports functions that take no parameters, are neither async nor generators, and whose body is either a single expression or a single return statement.

Examples

Invalid

1
<script>
2
let count = $state(0);
3
const doubled = $derived.by(() => count * 2);
4
</script>

code-block.svelte:3:17 lint/nursery/noSvelteUselessDerivedBy  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This $derived.by() function only returns a single expression.
  
    1 │ <script>
    2 │ let count = $state(0);
  > 3 │ const doubled = $derived.by(() => count * 2);
      │                 ^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ $derived.by() is only needed when the derivation requires statements, such as loops or intermediate variables. Passing the expression to $derived() directly is shorter and behaves the same way.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Safe fix: Pass the expression to $derived() directly.
  
    1 1 │   <script>
    2 2 │   let count = $state(0);
    3   │ - const·doubled·=·$derived.by(()·=>·count·*·2);
      3 │ + const·doubled·=·$derived(count·*·2);
    4 4 │   </script>
    5 5 │

1
<script>
2
let count = $state(0);
3
const doubled = $derived.by(() => {
4
    return count * 2;
5
});
6
</script>

code-block.svelte:3:17 lint/nursery/noSvelteUselessDerivedBy  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This $derived.by() function only returns a single expression.
  
    1 │ <script>
    2 │ let count = $state(0);
  > 3 │ const doubled = $derived.by(() => {
      │                 ^^^^^^^^^^^
    4 │     return count * 2;
    5 │ });
  
  ℹ $derived.by() is only needed when the derivation requires statements, such as loops or intermediate variables. Passing the expression to $derived() directly is shorter and behaves the same way.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Safe fix: Pass the expression to $derived() directly.
  
    1 1 │   <script>
    2 2 │   let count = $state(0);
    3   │ - const·doubled·=·$derived.by(()·=>·{
    4   │ - ····return·count·*·2;
    5   │ - });
      3 │ + const·doubled·=·$derived(count·*·2);
    6 4 │   </script>
    7 5 │

Valid

1
<script>
2
let count = $state(0);
3
const doubled = $derived(count * 2);
4
const doubledPlusOne = $derived.by(() => {
5
    const doubled = count * 2;
6
    return doubled + 1;
7
});
8
</script>