Behavior of Biome Linter for Class vs. Functional Components in React

[EmmeMax]

Hi!

I’ve noticed different behavior of the Biome linter for class components versus functional components in React. Or maybe it’s just me, and I simply didn’t understand it correctly. Either way, here’s the scenario:

In a class component, with the code below, Biome doesn't provide any feedback:

foo = () => {
  // function body
}

In a functional component, with the code below, Biome tells me that the variable or function is unused:

const foo = () => {
  // function body
}

// or

function boo() {
  // function body
}

I searched online but didn’t find any relevant information. Maybe this is expected behavior, but I need a way to identify unused functions in class components.

I hope this makes sense.

Thank you for your attention!

[ematipico]

Few things:

• You can use our playground to reproduce possible issues with us: https://biomejs.dev/playground/
• Is there a particular rule you're referring to? The only "react" rules that Biome uses are two, and they are unrelated to your question.

In a class component, with the code below

Did you forget some code? This doesn't seem like a "class component" to me.

You forgot to tell us what's the expected behaviour for you 😅 What's incorrect or correct for you, given the examples you showed us?

[EmmeMax]

Yeah, okay... you’re totally right, sorry.

I'm referring to the rule noUnusedVariables.

Here’s a more exhaustive example. In the class component, there is no warning about the unused function bar(), but for the functional component, there is a warning. What I’m expecting is the warning for unused variables/functions: “This function is unused.” This would help me understand my codebase better.

Class component:

class Foo extends Component {
  bar() {
    // function logic
  }

  render() {
    // render stuff
  }
}

Functional component:

const Foo2 = () => {
  const bar = () => {
    // function logic
  };

  return; // render stuff
};

I’m not sure how to link the example to the playground, but if you paste the code and enable all the linter rules, you should see the warning.

And just out of curiosity, are you Italian by any chance?

PS: is it better if I edit my question?

[ematipico]

The rule is meant for variables, as the name of the rule describes.

In the example of the class, bar isn't a variable, but it's a method and it also becomes the public interface of all instances of that class.

In the second example, bar is variable, defined using const. Within the scope where it's created, the variable isn't read, so the rule is triggered.

[EmmeMax]

But the same happens with a function declaration when it is not used
like in this example

const Foo2 = () => {
  function bar(){
    // function logic
  };

  return; // render stuff
};

So, you are telling me that there is no way to determine if methods within the scope of a class are unused because a child class might be using them?

Sorry for all the questions; this is a new world for me, and I want to fully understand it.

Thank you

[ematipico]

But the same happens with a function declaration when it is not used

It's still the same principle. bar is a variable that you create inside the scope of Foo2, and it can't be used outside of it. It is born and dies within the scope of Foo2. bar is bound to the scope of Foo2 and you could say that bar is a private function.

So, you are telling me that there is no way to determine if methods within the scope of a class are unused because a child class might be using them?

It is possible, but it would require a totally different heuristic, In these cases, there's no concept of "scope". Classes work in a totally different way compared to the other cases you presented.

class Foo extends Component {
  bar() {
    // function logic
  }
}

Here the function bar is a public function, so we need to track this instance and all the instances created throughout a single project, in case this class is exported.

Biome doesn't have that infrastructure yet, so for now it will be up to you to determine if that function is used anywhere or not (there might be other tools that can do that already). However we are working towards it, but I can't tell you if this logic will be part of noUnusedVariables lint rule or another lint rule.