Advanced Patterns 11 exercises

Fixing forwardRef Locally

Here's the fixedForwardRef function from the previous lesson:

function fixedForwardRef(
render: (props: any, ref: any) => any
): (props: any) => any {
return forwardRef(render) as any;

Currently it uses the forwardRef provided globally by React, but we want to change it t

Loading exercise


00:00 Using the previous exercise as a guide, I want you to actually change forward ref instead of using the global definition, let's actually use this definition here. Let's actually make it a local function. And what I want you to do, you can approach this kind of creatively. There's one solution that uses this format,

00:19 but there's another solution that does it all on the type level. I kind of want you just to take this function and type it according to the trick that you saw in the previous exercise in the forward ref with generics explanation. Now you can just go and look at the code and copy that over. That's definitely the way to do it. I don't want you to necessarily have to find the solution yourself,

00:39 but hopefully by doing this, you will get a stronger sense for like how it works. But also this is probably the solution you should use if you're doing library stuff as well, because you probably don't want to be overriding the global in a library setting because then your downstream users might end up with that in their projects. So this I think is actually the solution

00:58 that I would use from those situations. But anyway, I've given you enough. Good luck.