Sonarqube counts incorrect cognitive complexity for React Functional Components [BUG/NO FUNCTIONALITY]

SonarQube Server / Community Build
, , ,
3

Having a React functional component return the html to be rendered is the pattern of React functional components. It seems like Vladislav’s initial bug report is still correct. A functional component’s return value is equivalent to the render function in the traditional React Component class.
See step 1 here: https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks#step-1-—-understanding-a-class-without-state-or-lifecycle-methods
The cognitive complexity calculation should result in the same number for the ExampleClassComponent.js and the ExampleFunctionalComponent.js in the link I posted above. I’ll add the JavaScript here for posterity:

ExampleClassComponent.js

import React, { Component } from 'react';

class App extends Component {
  alertName = () => {
    alert('John Doe');
  };

  render() {
    return (
      <div>
        <h3>This is a Class Component</h3>
        <button onClick={this.alertName}>
          Alert
        </button>
      </div>
    );
  }
};

export default App;

ExampleFunctionalComponent.js

import React from 'react';

function App() {
  const alertName = () => {
    alert('John Doe');
  };

  return (
    <div>
      <h3>This is a Functional Component</h3>
      <button onClick={alertName}>
        Alert
      </button>
    </div>
  );
};

export default App;
4 Likes