From the course: Building React and Django Apps

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using React hooks and refactoring a component to use hooks

Using React hooks and refactoring a component to use hooks

From the course: Building React and Django Apps

Start my 1-month free trial

Using React hooks and refactoring a component to use hooks

- [Speaker] We're going to Refactor the Countdown Timer component to use React hooks. React hooks are a new feature that represent an evolution in the design of React components. Think of a React component as a composition in assembly of various hooks. The useState hook maintains State separately from a component. So, instead of using a constructor in setState, you set the specific State field, directly. The useEffect hook is a replacement for any actions that need to be taken when Mounting and Unmounting a component. In our re-factored component, we don't need a class-based component, just a function. We're going to use the useState hook to store the remaining countdown number. Then, we use the useEffect hook to store the timer, itself. We use setRemaining instead of setState, here. And, we trigger the countdown every second, as before. We no longer need to use an Interval Timer because each time a State update…

Contents