How to use React's forwardRef function

Unterstanding ref forwarding

Hey!

This article is about an issue I ran into recently.

A while ago, I wrote an article on React’s references and the useRef hook. When I had to use refs myself again, I wondered why the references to my custom React button component didn’t work.

The issue here was that just like the “key” prop, “ref” is a special property that doesn’t behave like others as it’s no part of the props that we access in our components.

Using the forwardRef function allows us to access the ref property and attach it to the HTML element of our choice.

I have explained the whole topic more in detail in the article. I hope you like it.

Thanks for reading, and have a great week!

Felix

---

If you want to learn web development through online courses, you can currently get a 1-month premium membership of SkillShare with this link for free (cancel any time).

I also have a course published there in case you want to learn more about Progressive Web Apps 😉