useQwikMethodUsage

JSX and TSX

Summary

Rule available since: v2.2.6
Diagnostic Category: lint/nursery/useQwikMethodUsage
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- qwik
Sources:
- Same as qwik/use-method-usage

How to configure

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

Description

Disallow use* hooks outside of component$ or other use* hooks in Qwik applications.

Ensures Qwik’s lifecycle hooks are only used in valid reactive contexts. See Qwik Component Lifecycle for proper hook usage.

Examples

Invalid

1
import { useSignal } from "@builder.io/qwik";
2

3
export const Counter = () => {
4
  const count = useSignal(0);
5
};

code-block.js:4:17 lint/nursery/useQwikMethodUsage ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Qwik hook detected outside of an allowed scope.
  
    3 │ export const Counter = () => {
  > 4 │   const count = useSignal(0);
      │                 ^^^^^^^^^^^^
    5 │ };
    6 │ 
  
  ℹ Qwik’s reactive hooks (functions starting with  use* followed by uppercase letter) must be:
    - Used exclusively within component$ functions
    - Or encapsulated within other valid Qwik hooks
  
  ℹ Check the Qwik documentation.

Valid

1
import { component$, useSignal } from "@builder.io/qwik";
2

3
export const Counter = component$(() => {
4
  const count = useSignal(0);
5
});
6

7
export const useCounter = () => {
8
  const count = useSignal(0);
9
  return count;
10
};