Skip to content

Latest commit

 

History

History
38 lines (31 loc) · 2.06 KB

README-pt4.md

File metadata and controls

38 lines (31 loc) · 2.06 KB

Phase 4: Clock

In this phase, you will refactor the Clock and ClockToggle components from Class Components into Function Components. The Clock component is rendered inside of App but is not passed any props. It displays the current date/time information and will be updated every second. The ClockToggle is basically a button that will mount and unmount the Clock component from the page. (This will enable you to test your useEffect clean-up function.) It is also rendered inside of App and is passed one prop: the toggleClock callback that should run when the button is clicked.

Just like with the previous phases, begin by converting the component props and state in the Clock and ClockToggle Class Components to props and state in Function Components. That should be all you need to do for ClockToggle.

As for Clock, convert its instance methods besides the lifecycle methods (i.e., componentDidMount and componentWillUnmount) into regular functions in the Function Component.

componentDidMount will run after the first render of the component. Convert this into a useEffect with an empty dependency array in the Function Component.

componentWillUnmount takes the interval id returned by setInterval and clears the interval. componentWillUnmount will be called right before the component is removed from the component tree. Have the useEffect function that replaced componentDidMount return a function that will clear the interval set by the useEffect function. (This step is a bit tricky, so call for help if you can't solve it within 15 minutes.) React will automatically run this returned function behind the scenes when the component is about to unmount. React would also run this function to clean up before running the useEffect again after a subsequent render, but the empty dependency array assures that this particular useEffect will only run once per component lifecycle.

Once again, test your conversion in the browser.