How to Use Hooks With Higher-Order Components
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:05] Using hooks with hooks. Since hooks are just functions that return components, they can be based on hooks.
[00:06 - 00:10] Create a file inside of the adapters. Sound font.
[00:11 - 00:18] Call it with instrument based on hook.tsx. Define the injected props.
[00:19 - 00:24] Type injected props. It's going to be similar to injected props from the other adapters.
[00:25 - 00:38] We're going to send in the loading flag so that the thing that we'll wrap into this adapter knows that the instrument is still loading, the play, and the stop functions that will allow to play nodes. Then define the provider props.
[00:39 - 00:45] Type provider props. Still not much difference from the regular hooks that we already implemented.
[00:46 - 00:51] Define the audio context and the optional instrument field. And now let's create our hook.
[00:52 - 01:02] Expert const with instrument. It's a function that is going to receive a wrapped component of type component type from injected props.
[01:03 - 01:16] It's going to return a function with instrument component that will receive the provider props. Here we'll get the audio context and the instrument from the props, audio context, and instrument from props.
[01:17 - 01:28] We'll create the from hook object using the use sound font hook. First from hook equals use sound font passing the audio context.
[01:29 - 01:35] Audio context. Get the loading current play stop and load from the hook object.
[01:36 - 01:45] Loading current play stop and load from hook. Actually, you can destructure the return value straight away.
[01:46 - 02:03] If they use effect, here we'll observe the loading current play stop and load. And every time they change, we're going to check if we're not loading and the instrument from the props is not equal to current that we're using right now.
[02:04 - 02:15] Then we'll load the new instrument. And the wrapped component return wrapped component passing the loading play and stop.
[02:16 - 02:21] That's it. You have the adapter hook implemented using the use sound font hook.
[02:22 - 02:23] So you can combine those two approaches if you need to.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
