Refactoring React Components

Introduction

This document will explain the general steps in refactoring a React file

Prerequisites

1. Make sure you have eslint, prettier, and sort-imports vs code extensions installed

2. Make sure you have format on save configured (link setup doc)

Steps to Refactor

1. Save the file to auto format and run eslint, prettier, and sort-imports

2. Resolve any eslint warnings (unused vars, nested ternaries, complex functions, etc.)

3. Reduce code footprint

   1. Destructure the props in the argument of the function instead of accessing like props.name

      // good
      function UserDetail({
          name,
          age,
      }) {
        return (
          <p>Name: {name} Age: {age}</p>
        )
      }
      
      
      // bad
      function UserDetail(props) {
        return (
          <p>Name: {props.name} Age: {props.age}</p>
        )
      }

   2. Remove open ended ternaries ex. empty string → var ? <something> : '' or var ? <something> : null and replace them with the && operator var && <something>

   3. When possible reduce the logic done in a useEffect by calling to functions outside of the useEffect.

   4. Identify repeated code in functions where a cost can be created and reused. This is common in ternary operators where both sides are returning a whole block of code with one difference.

   5. Identify and create components out of code blocks that could fully function on their own. They do not need to be refactored all the way to fully reusable across the while application/api until we identify it as needed, but it should be reused within the file that's being refactored if needed.

      1. We want to make sure each file is only doing what its set out to do. A table of information does not need logic for a legend modal. The legend modal should be its own component and imported

4. Order the declaration of variables and functions in the below order

   1. Imports

   2. Constructor

   3. Non state hooks (useDispatch etc.)

   4. State hooks (useState)

   5. useEffects

      1. There may be times when a function needs to be created before a useEffect when used in the useEffect, this is fine.

   6. Functions

   7. JSX return value

5. Simplify existing logic if needed

6. Create new components and import them