Uploaded image for project: 'Rules Repository'
  1. Rules Repository
  2. RSPEC-4438

ReactJS class methods and fields should be ordered correctly

    XMLWordPrintable

    Details

    • Type: Code Smell Detection
    • Status: Closed
    • Resolution: Won't Fix
    • Message:
      Reorder the methods and fields of this class to be compliant with the order defined in the rule.
    • Highlighting:
      Hide

      Primary: first method or field not correctly ordered

      Show
      Primary: first method or field not correctly ordered
    • Default Severity:
      Minor
    • Impact:
      Low
    • Likelihood:
      Low
    • Default Quality Profiles:
      Sonar way
    • Targeted languages:
      JavaScript
    • Irrelevant for Languages:
      ABAP, C#, C, C++, Cobol, CSS, Flex, HTML, Java, Objective-C, PHP, PL/I, PL/SQL, Python, RPG, Swift, T-SQL, TypeScript, VB.Net, VB6, XML
    • Remediation Function:
      Constant/Issue
    • Constant Cost:
      10min
    • Analysis Scope:
      Main Sources

      Description

      The following order represents what is commonly expected by ReactJS developers.
      Not following this convention has no technical impact, but will reduce the class's readability because most developers are used to this standard order.

      1. static methods
      2. the constructor
      3. getChildContext()
      4. componentWillMount()
      5. componentDidMount()
      6. componentWillReceiveProps()
      7. shouldComponentUpdate()
      8. componentWillUpdate()
      9. componentDidUpdate()
      10. componentWillUnmount()
      11. clickHandlers or eventHandlers such as onClickSubmit() or onChangeDescription()
      12. getter methods for render such as getSelectReason() or getFooterContent()
      13. optional render methods such as renderNavigation() or renderProfilePicture()
      14. render()

      Noncompliant Code Example

      export default class MyApp extends React.PureComponent {
      
        render() { // Noncompliant
        }
        ...
        componentDidMount() {
        }
      }
      

      Compliant Solution

      export default class MyApp extends React.PureComponent {
      
        componentDidMount() {
        }
        ...
        render() {
        }
      }
      

        Attachments

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            alexandre.gigleux Alexandre Gigleux
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: