Introduction
This document will explain the general steps in refactoring a React file
Prerequisites
Make sure you have eslint, prettier, and sort-imports vs code extensions installed
Make sure you have format on save configured (link setup doc)
Steps to Refactor
Save the file to auto format and run eslint, prettier, and sort-imports
Resolve any eslint warnings (unused vars, nested ternaries, complex functions, etc.)
Remove ternaries that have one of the cases as
null
, or an empty string →var ? <something> : ''
orvar ? <something> : null
and replace them with the&&
operatorvar && <something>
Order the declaration of variables and functions in the below order
Non state hooks (useDispatch etc.)
State hooks (useState)
useEffects
Functions
JSX return value
Move any long functions into a utils folder (tbd)
Simplify existing logic if needed
Look for chunks of code that can be turned into components
Create new components and import them
0 Comments