React Hooks and Suspense
Share Complex Logic across React Components with Custom Hooks
A lot of the time, when you define logic in a component, you will want to reuse it in a few different places within your application as separate instances.
In this lesson, we will break out the logic of our StopWatch Component and use two instances within our stopwatch and compare the difference between the two lapse instances.
You'll learn:
- Create a function as a custom hook for your components
- Create multiple instances of the logic within a component
- Compare the values between the two instances.
Instructor: [00:00] We have the scenario where we want to show two stopwatches in the same place and show a lapse difference. I click Start here and that lapse difference increases. If I click Start on this one then that lapse difference stays about the same. If I hit Clear then that lapse difference starts going negative. If I hit Clear then lapse difference goes to zero.
[00:19] We want to be able to reuse all this logic that we created for this stopwatch. What I'm going to do is I'll cut this out here. We're going to make a new function called use-stopwatch, which will be our own custom hook.
[00:32] I'm going to paste all that logic in here, and we'll return an object that has all the stuff that we need for this stopwatch. Handle-run-click. Handle-clear-click, lapse and running. With that all set up, we can now create a stopwatch-one, use-stopwatch, and we'll have a stopwatch-two.
[00:53] Then I'll go ahead and say this lapse is stopwatch-one.lapse. This onClick is stopwatch-one, handle-run-click. This running will be stopwatch-one-running and stopwatch-one-handle-click-click.
[01:07] Now we'll take all of this, we'll add an HR here and an HR here, and we'll paste the rest of this here. Then we can switch all these from stopwatch-one to stopwatch-two. We'll save that. We can start and we can start this one. We can clear this one and clear this one, and they operate completely independently of one another.
[01:33] Now let's go ahead and add that comparison between these two HRs. I have a strong lapse difference and then a span of stopwatch-one.lapse minus this stopwatch-two.lapse and MS for milliseconds. Now if we click Start and then Start, then Clear and then Clear, we're all set.
[02:01] In review, to reuse this logic that we had in our stopwatch, we simply took all of the logic, copy and pasted it into this new function, and then returned all the values that were necessary to hook into the state and update the state for both of these stopwatches.
[02:16] Creating a custom, new stopwatch hook that can be used in this component twice, or in any other components that we in our application gives us a nice clean separation between the logic and state of this component and the view, allowing us to customize the view however we like while still sharing the code for the logic.