Pass Refs Through Higher-Order Components With forwardRef
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: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.
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.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)