Skip to content

💅 useHookAtTopLevel is not working properly on specific conditions. #6110

@froggy1014

Description

@froggy1014

Environment information

CLI:
  Version:                      1.9.4
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           unset
  JS_RUNTIME_NAME:              unset
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Error:                        Found an unknown key `assist`.
  Error:                        Found an unknown key `includes`.
  Error:                        Found an unknown key `includes`.
  Error:                        Found an unknown key `noVar`.
  Error:                        Found an unknown key `noImportCycles`.
  Error:                        Found an unknown key `plugins`.
  Status:                       Loaded with errors
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Formatter:
  Format with errors:           false
  Indent style:                 Tab
  Indent width:                 2
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              BracketSpacing(true)
  Ignore:                       []
  Include:                      []

JavaScript Formatter:
  Enabled:                      true
  JSX quote style:              Double
  Quote properties:             AsNeeded
  Trailing commas:              All
  Semicolons:                   Always
  Arrow parentheses:            Always
  Bracket spacing:              unset
  Bracket same line:            false
  Quote style:                  Double
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset

JSON Formatter:
  Enabled:                      false
  Indent style:                 Space
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   1
  Trailing Commas:              unset

CSS Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  Double

GraphQL Formatter:
  Enabled:                      false
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Rule name

useHookAtTopLevel

Playground link

https://next.biomejs.dev/playground/?code=YwBvAG4AcwB0ACAAVABlAHMAdABNAGUAbQBvACAAPQAgAG0AZQBtAG8AKAAKACAAIABmAG8AcgB3AGEAcgBkAFIAZQBmACgAKABwAHIAbwBwAHMALAAgAHIAZQBmACkAIAA9AD4AIAB7AAoAIAAgACAAIAB1AHMAZQBFAGYAZgBlAGMAdAAoACgAKQAgAD0APgAgAHsACgAgACAAIAAgACAAIABjAG8AbgBzAHQAIABbAHQAZQBzAHQALAAgAHMAZQB0AFQAZQBzAHQAXQAgAD0AIAB1AHMAZQBTAHQAYQB0AGUAKAAxACkAOwAKACAAIAAgACAAfQAsACAAWwBdACkAOwAKACAAIAAgACAAcgBlAHQAdQByAG4AIAA8AGQAaQB2ACAAcgBlAGYAPQB7AHIAZQBmAH0APgB0AGUAcwB0ADwALwBkAGkAdgA%2BADsACgAgACAAfQApAAoAKQA7AAoACgBjAG8AbgBzAHQAIABUAGUAcwB0AEYAbwByAHcAYQByAGQAUgBlAGYAIAA9ACAAZgBvAHIAdwBhAHIAZABSAGUAZgAoACgAcAByAG8AcABzACwAIAByAGUAZgApACAAPQA%2BACAAewAKACAAIAB1AHMAZQBFAGYAZgBlAGMAdAAoACgAKQAgAD0APgAgAHsACgAgACAAIAAgAGMAbwBuAHMAdAAgAFsAdABlAHMAdAAsACAAcwBlAHQAVABlAHMAdABdACAAPQAgAHUAcwBlAFMAdABhAHQAZQAoADEAKQA7AAoAIAAgAH0ALAAgAFsAXQApADsACgAgACAAcgBlAHQAdQByAG4AIAA8AGQAaQB2ACAAcgBlAGYAPQB7AHIAZQBmAH0APgB0AGUAcwB0ADwALwBkAGkAdgA%2BADsACgB9ACkAOwAKAAoACgBjAG8AbgBzAHQAIABUAGUAcwB0AE0AZQBtAG8ARgB1AG4AYwB0AGkAbwBuACAAPQAgAG0AZQBtAG8AKAAoAHAAcgBvAHAAcwApACAAPQA%2BACAAewAKACAAIAB1AHMAZQBFAGYAZgBlAGMAdAAoACgAKQAgAD0APgAgAHsACgAgACAAIAAgAGMAbwBuAHMAdAAgAFsAdABlAHMAdAAsACAAcwBlAHQAVABlAHMAdABdACAAPQAgAHUAcwBlAFMAdABhAHQAZQAoADEAKQA7AAoACgAgACAAfQAsACAAWwBdACkAOwAKACAAIAByAGUAdAB1AHIAbgAgADwAZABpAHYAPgB0AGUAcwB0ADwALwBkAGkAdgA%2BADsACgB9ACkAOwAKAAoAYwBvAG4AcwB0ACAAVABlAHMAdABGAG8AcgB3AGEAcgBkAFIAZQBmAEYAdQBuAGMAdABpAG8AbgAgAD0AIABmAG8AcgB3AGEAcgBkAFIAZQBmACgAKABwAHIAbwBwAHMALAAgAHIAZQBmACkAIAA9AD4AIAB7AAoAIAAgAHUAcwBlAEUAZgBmAGUAYwB0ACgAKAApACAAPQA%2BACAAewAKACAAIAAgACAAYwBvAG4AcwB0ACAAWwB0AGUAcwB0ACwAIABzAGUAdABUAGUAcwB0AF0AIAA9ACAAdQBzAGUAUwB0AGEAdABlACgAMQApADsACgAgACAAfQAsACAAWwBdACkAOwAKACAAIAByAGUAdAB1AHIAbgAgADwAZABpAHYAIAByAGUAZgA9AHsAcgBlAGYAfQA%2BAHQAZQBzAHQAPAAvAGQAaQB2AD4AOwAKAH0AKQA7AAoACgA%3D

Expected result

React Components should be linted conditions following below

  1. Component with forwaredRef
  2. Component with memo
const TestMemo = memo(
  forwardRef((props, ref) => {
    useEffect(() => {
      const [test, setTest] = useState(1);
    }, []);
    return <div ref={ref}>test</div>;
  })
);

const TestForwardRef = forwardRef((props, ref) => {
  useEffect(() => {
    const [test, setTest] = useState(1);
  }, []);
  return <div ref={ref}>test</div>;
});

above both cases should be cause the lint error below

Expect Result
Image Image

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

Labels

A-LinterArea: linterD-ReactDomain: ReactL-JavaScriptLanguage: JavaScript and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bug

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions