React components are relatively outdated and are annoying to use because of convoluted state variables and functions like componentDidMount.
Solution
This PR introduces hooks, which are much more widely used than components. A few steps were taken to convert the components to hooks.
Change class definitions to export default function foo(props) and remove render methods
Use makeStyles instead of withStyles
Remove all instances of this
Replace all constructors with const [state, setState] = useState("any state data goes here") and use setState("any state data goes here") to modify state
Change componentDidMount to useEffect
Testing
I tested these changes by making sure all of the components still rendered and that the functionality was still there. @JimothyGreene when you get a chance, double check that TodoList is still functioning as expected because that's where I made the most alterations since I had to change a bunch of setState functions.
Notes
I referenced a Medium post to help me figure out how to make these changes.
Problem
React components are relatively outdated and are annoying to use because of convoluted state variables and functions like
componentDidMount.Solution
This PR introduces hooks, which are much more widely used than components. A few steps were taken to convert the components to hooks.
export default function foo(props)and removerendermethodsmakeStylesinstead ofwithStylesthisconst [state, setState] = useState("any state data goes here")and usesetState("any state data goes here")to modify statecomponentDidMounttouseEffectTesting
I tested these changes by making sure all of the components still rendered and that the functionality was still there. @JimothyGreene when you get a chance, double check that
TodoListis still functioning as expected because that's where I made the most alterations since I had to change a bunch ofsetStatefunctions.Notes
I referenced a Medium post to help me figure out how to make these changes.
Closes #26