Define What to Load Before Rendering With Static Composition

[00:00 - 00:33] Hogs have another interesting use case. Imagine a situation where you, instead of changing an instrument in runtime, want to specify it once so that it loads before you actually start rendering a component. There is a way to do it, and it's called static composition. So far, we've been composing components dynamically, where the arguments of the functions or the props of the components were passed dynamically in runtime. However, we can create a hook that remembers an argument and then uses it in runtime when rendering a component.

[00:34 - 00:50] So let's define one of those. Inside of the SRC adapters, create a new file with instrument static. tsx. Use the regular class-based with instrument Hogs as a base for our static composition Hogs.

[00:51 - 01:07] Almost everything will be the same. The injected props, the provider state, first thing that will need to change is the provider props, because now we're not going to pass the instrument at the runtime. Remove it from here. Also, rename with instrument to with instrument static.

[01:08 - 01:58] Instead of dropped component, our with instrument static will accept the instrument name, we'll call it initial instrument, of type instrument name, and the default value is going to be default instrument. With instrument static, we'll return another function that will call enhance component. And this is where we will now accept the wrapped component. Wrapped component of type component type with T props. And then we wrap everything into this enhance component function. Scroll down and add one more curly bracket here. We don't need the component did update anymore. We can remove it. In this version of Hogs, we will be able to provide the instrument name only once. We also don't need the shoot component update.

[01:59 - 02:17] And instead of getting the instrument from the props inside of the component did mount, we now load the initial instrument that we get from the with instrument static props. Go to index.ts and re-expert everything from the with instrument static module.

[02:18 - 02:44] Now open SRC components keyboard and there create another component with static instrument TSX. And here we'll be able to define a bunch of statically composed instruments with guitar and with piano. Here we pass an initial instrument to our with instrument static hook. And then we can enhance because in return, we get a function, the enhance function that generates a hook from the keyboard. And then we can use the wrapped component exactly like we did with a regular hook.

[02:45 - 03:02] So basically we've added another layer of nesting instead of wrapping the component into another component. We now wrap a function into another function and that enhance function wraps the component. Now we can create as many functions as we want for each of the instruments and use them to connect components to sound formed after.