Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@lucasweng
Copy link
Contributor

Summary

Fixes #8027. The useReactFunctionComponents rule incorrectly flagged class components that implement componentDidCatch using class expressions.

Test Plan

  • Added a valid test case for an error boundary defined as a class expression
  • All existing tests pass

@changeset-bot
Copy link

changeset-bot bot commented Nov 14, 2025

🦋 Changeset detected

Latest commit: 15951ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@biomejs/biome Patch
@biomejs/cli-win32-x64 Patch
@biomejs/cli-win32-arm64 Patch
@biomejs/cli-darwin-x64 Patch
@biomejs/cli-darwin-arm64 Patch
@biomejs/cli-linux-x64 Patch
@biomejs/cli-linux-arm64 Patch
@biomejs/cli-linux-x64-musl Patch
@biomejs/cli-linux-arm64-musl Patch
@biomejs/wasm-web Patch
@biomejs/wasm-bundler Patch
@biomejs/wasm-nodejs Patch
@biomejs/backend-jsonrpc Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added A-Linter Area: linter L-JavaScript Language: JavaScript and super languages labels Nov 14, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 14, 2025

Walkthrough

The useReactFunctionComponents linting rule is enhanced to detect error boundaries defined as class expressions. Previously, the rule only recognized componentDidCatch in class declarations and default exports, missing cases where class components are assigned to variables. The fix extends the detection logic to inspect class expression initialisers within variable declarators, ensuring the rule correctly skips components that implement error boundary methods regardless of how they're declared.

Suggested labels

A-Linter, L-JavaScript

Suggested reviewers

  • dyc3
  • ematipico

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed Title clearly and concisely describes the primary change: fixing the useReactFunctionComponents rule to handle class expressions with componentDidCatch.
Description check ✅ Passed Description directly relates to the changeset, explaining the bug fix for issue #8027 and outlining the test plan with valid test cases.
Linked Issues check ✅ Passed Code changes fully satisfy issue #8027 requirements: the rule now detects componentDidCatch in class expressions, including support for JsVariableDeclarator paths, and includes a valid test case demonstrating the fix.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing the issue: lint rule logic update, test file addition, and changelog entry—no extraneous modifications detected.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
crates/biome_js_analyze/tests/specs/style/useReactFunctionComponents/valid.jsx (1)

27-33: Good test case, but consider testing exported class expressions as well.

The test validates the fix for non-exported class expressions. Consider adding another test case for exported class expressions to ensure comprehensive coverage:

export const ExportedErrorBoundary = class extends React.Component {
  componentDidCatch(error, errorInfo) {}
  render() {
    return this.props.children;
  }
}
crates/biome_js_analyze/src/lint/style/use_react_function_components.rs (1)

118-133: Fix works correctly, but consider extracting the duplicate member-checking logic.

The logic correctly handles class expressions assigned to variables. However, the pattern for checking if a member is named "componentDidCatch" is now duplicated across three branches (lines 96-106, 109-116, and 123-130).

Consider extracting a helper function:

fn has_method_named(members: impl Iterator<Item = impl AstNode>, method_name: &str) -> bool {
    members.any(|member| {
        member
            .name()
            .ok()
            .flatten()
            .and_then(|name| name.name())
            .is_some_and(|name| name.text() == method_name)
    })
}

Then use it in all three branches:

JsClassDeclaration(js_class_declaration) => {
    has_method_named(js_class_declaration.members().iter(), "componentDidCatch")
}
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1fdcaf0 and 15951ba.

⛔ Files ignored due to path filters (1)
  • crates/biome_js_analyze/tests/specs/style/useReactFunctionComponents/valid.jsx.snap is excluded by !**/*.snap and included by **
📒 Files selected for processing (3)
  • .changeset/fuzzy-worms-smell.md (1 hunks)
  • crates/biome_js_analyze/src/lint/style/use_react_function_components.rs (2 hunks)
  • crates/biome_js_analyze/tests/specs/style/useReactFunctionComponents/valid.jsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (11)
  • GitHub Check: Bench (biome_js_formatter)
  • GitHub Check: Bench (biome_js_parser)
  • GitHub Check: Bench (biome_js_analyze)
  • GitHub Check: Test (depot-ubuntu-24.04-arm-16)
  • GitHub Check: Documentation
  • GitHub Check: Test Node.js API
  • GitHub Check: Test (depot-windows-2022-16)
  • GitHub Check: Check Dependencies
  • GitHub Check: Lint project (depot-ubuntu-24.04-arm-16)
  • GitHub Check: Lint project (depot-windows-2022)
  • GitHub Check: autofix
🔇 Additional comments (2)
crates/biome_js_analyze/src/lint/style/use_react_function_components.rs (1)

5-5: LGTM!

Import is used correctly in the new match branch.

.changeset/fuzzy-worms-smell.md (1)

1-16: LGTM!

The changeset clearly documents the fix with a relevant example. Patch version is appropriate for this bug fix.

@codspeed-hq
Copy link

codspeed-hq bot commented Nov 14, 2025

CodSpeed Performance Report

Merging #8102 will not alter performance

Comparing lucasweng:fix/useReactFunctionComponents (15951ba) with main (1fdcaf0)

Summary

✅ 58 untouched
⏩ 95 skipped1

Footnotes

  1. 95 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

Copy link
Contributor

@dyc3 dyc3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@dyc3 dyc3 merged commit 47d940e into biomejs:main Nov 15, 2025
18 checks passed
@github-actions github-actions bot mentioned this pull request Nov 15, 2025
@lucasweng lucasweng deleted the fix/useReactFunctionComponents branch November 16, 2025 01:22
ematipico pushed a commit to hamirmahal/biome that referenced this pull request Nov 19, 2025
l0ngvh pushed a commit to l0ngvh/biome that referenced this pull request Dec 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-Linter Area: linter L-JavaScript Language: JavaScript and super languages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useReactFunctionComponents does not see componentDidCatch in class expressions

3 participants