Unused local variables does not play nicely with JSX


We have recently started using SonarCloud and I must admit it’s been a great help to identify issues in our codebase and feeding that information to all the engineers contributing! Thank you for that

Our setup is on SonarCloud using the SonarAnalyzer (JavaScript). I find that the rule “Unused local variables and functions should be removed” (javascript:S1481) does not play nicely with JSX.

Given the code below, SonarAnalyzer will report that HOCComponent is not used.

import createHigherOrderComponent from "./utils.js"
import Component from "./component.js"

function Page() {
  const HOCComponent = createHigherOrderComponent(Component);
  return (
    <HOCComponent />

This is arguably not the best code, and we could/should probably create a code smell rule to prevent that, but it is wrongly reported by the SonarAnalyzer that “HOCComponent” is not used.

Let me know if I can help further, happy to share privately a real life example in our codebase


Thank a lot for kind words! :blush:

About this false positive, indeed we are aware of this problem, we will fix it in the next sprint on JavaScript analyzer (ticket)


1 Like

Hey @Lena I am still having the same issue

Do I need to do any configuration to setup for react/jsx?

Hello @wellyal and welcome to our community,

This issue should be resolved by now (on SonarCloud) and I cannot reproduce it locally with the snippet you provided.

Are you seeing this issue in SonarQube <=8.4? If that’s the case, please note that this fix will only be available in version 8.5 which hasn’t been released yet.

Hope that helps,