Ref Forwarding

Ref forwarding via React.forwardRef()

Ref forwardingReferences to a component or a DOM element enables passing a reference through a component to a child component. This will not be necessary in most cases, but it can become of interest if you are creating reusable component libraries.

A ref is forwarded via React.forwardRef() and is passed a function as a parameter during this process. The ref passes props, as well as the ref itself, to the forwardRef function.

This sounds incredibly cumbersome, so let us first look at an example.

Note: For the SPA widgets in this lesson, you will have to open the Web Inspector to view the app response. Click on the link given below the widget to open the app in a new browser tab. Then right-click on that webpage and select “Inspect”, which will open the Web Inspector. Here, you can go to the “Console” tab to see the app response.