Andre Johnson

Forwarding Refs

This is typically not necessary for most components in the application.

Andre Johnson
Forwarding Refs

Internal navigation

You can visit this post, or this page, go back to the homepage or just back to the archive.

Displaying a custom name in DevTools

React.forwardRef accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.

For example, the following component will appear as ”ForwardRef” in the DevTools:

const WrappedComponent = React.forwardRef((props, ref) => {
  return <LogProps {...props} forwardedRef={ref} />;

If you name the render function, DevTools will also include its name (e.g. ”ForwardRef(myFunction)”):

const WrappedComponent = React.forwardRef(
  function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;

We provide premium nursery stock

along with technology-led garden consultancy

and design services to both private and public sector organisations

large and small.

© All Rights Reserved, Goharbar Farm & Nursery