Pass Refs Through Higher-Order Components With forwardRef
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:09] Passing refs through when using Hogs. Refs provide a way to access DOM nodes of rectelements created in the render method.
[00:10 - 00:19] By default, refs won't be passed through. And for true reusability, we can also consider exposing a ref for our Hock.
[00:20 - 00:32] For that, we can use a forward ref function. Create a file inside of the C_ADAPTER_sound font, call it "with_instrument_ forwarded ref.tsx".
[00:33 - 00:41] The base of our Hock will be the same with a few changes. We can copy the "with_instrument_hock" and use it as a base for this example.
[00:42 - 00:49] The public API is the same, so the props won't change. Inside of the "with_instrument", declare some runtime types.
[00:50 - 01:00] First, we'll need component_instance. That's going to be instance type type of wrapped component.
[01:01 - 01:21] And then we define "with_forwarded ref = provider_props" and an object with forwarded ref of type ref of component instance. Update the "with_instrument_definition" instead of "provider_props" we'll now use "with_forwarded ref".
[01:22 - 01:36] Because it already includes the provider_props plus the "forwarded ref", then scroll down to the constructor. Here we need to call "super", not with the "provider_props" type, but with " forwarded ref" as well.
[01:37 - 01:42] Skip the lifecycle methods, they stay the same. And then we update the render.
[01:43 - 02:01] And we get the "forwarded ref" from these props and pass it as a ref to the wrapped component. Now instead of returning the wrapped component, we'll return "forward ref" from component instance and provider_props.
[02:02 - 02:21] Here we pass in a function that will receive props and ref, and then we return "with_instrument_forwarded ref = ref" and we pass in the props. Refs are not provided with the props, so to get access to the ref object, we have to call special method "forward ref".
[02:22 - 02:32] We provide another anonymous function here that receives two arguments, the props and the ref. Props are the original props, and ref is the ref that should be forwarded.
[02:33 - 02:35] And that's how we keep refs working with Hox.