Refactoring Components
summary
Decides whether to refactor by showing concrete steps: write characterization tests that record current behavior (date input as Date/string/number, negative and zero cases), replace moment.js → date-fns format, catch that date-fns throws for nonsense strings and wrap it to return "invalid date", and discover a bug where zero becomes empty string which gets filed rather than silently changed. For JSX, use snapshot tests for large components, then extract a repeated label into a NumberInput component, add focused unit tests, and change product types with confidence.
AI-written summary · about
chapters (20)
- 0:00Start
- 1:50What Is Refactoring
- 2:14Renaming Variables
- 2:51Factoring Out Repeated Code
- 3:40Benefits
- 4:23Cost of Refactoring
- 4:45Risks Associated with Refactoring
- 5:45Internet Explorer
- 9:02Determine the Current Behavior
- 9:19Write Tests To Determine the Current Behavior
- 10:55Writing a Test
- 13:25Strings
- 13:53Invalid Date String
- 23:50Snapshot Tests
- 30:25Demo
- 31:15The Farm Shop
- 31:56New Requirements
- 33:54Characterization Tests
- 34:07Test the Product Components
- 38:01Update to Product inside a Test Was Not Wrapped in Act
related talks
32mRefactoring React
49mBuilding Better Components - A Journey to a More Resilient Frontend
12mReducing bugs in a React codebase
17mLambdas, lambdas everywhere...
51mBuilding Better Components — A Journey to a More Resilient Frontend
28mVerbosity, Maybe the Key to Better Code
38mMaintainable React
40mCompassionate Components