Friday, July 10, 2020

Refactoring In React: Class based components to Functional

I have a react class component I wanted to change to a functional one (to make refactoring easier)... I tried converting it.. but at the end the tests no longer ran. 

I wanted a way to incrementally convert it from one form to the other, so I could take smaller steps and run the tests after each step.

I wrapped the existing class based Component in a functional one. Renaming the existing one to InnerX and naming the functional one X.  Then I passed app props though to the existing InnerX. This adds no functionality but wrapping the component. I then moved the state from InnerX to X and passed it down via props. Then one at a time moved each function, running tests after each step... passing them as props. Any time anything failed I could rollback a step and try a different function with less dependencies.

Anyway... I share as it seems to be a useful technique if you are stuck.

Wednesday, July 08, 2020