React JS Tutorial: Understanding forwardRef

Welcome to our comprehensive guide on React JS's forwardRef! In this lesson, we'll dive into the world of reference refinement, exploring why and how it works. By the end of this tutorial, you'll be able to use forwardRef confidently in your own projects.

🎯 Introduction

forwardRef is a React higher-order component that allows you to pass a ref to a child component and access it in a parent component. This is particularly useful when working with third-party components that don't support refs natively.

📝 Note:

Before diving into forwardRef, let's briefly cover what refs are in React. Refs provide a way to access the DOM node or React element created from a component. You can use refs to:

Measure a DOM node
Focus a DOM node
Trigger imperative actions

💡 Pro Tip:

Refs are most commonly used for input elements, textarea, and custom components.

🎯 Understanding forwardRef

Now, let's delve into forwardRef. Here's the syntax for using it:

jsx

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  // Your component code here
});

In the above example, CustomInput is a forwardRef-wrapped component. ref is an object containing the forwarded ref. When using forwardRef, you'll typically access the ref in the parent component, like so:

jsx

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <CustomInput ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

In this example, we've created a ParentComponent and a CustomInput using forwardRef. We've also created a ref in the parent component, which is then passed to the CustomInput as a prop. We can then access this ref in the parent component and use it to focus the input when the "Focus Input" button is clicked.

📝 Note:

It's important to note that when using forwardRef, you'll often create a ref in the parent component, pass it to the child component, and then access the child component's ref in the parent component.

🎯 Practical Example

Let's create a practical example using forwardRef and a third-party component, react-datepicker.

jsx

import React, { forwardRef } from 'react';
import Datepicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const CustomDatepicker = forwardRef((props, ref) => (
  <Datepicker {...props} ref={ref} />
));

class App extends React.Component {
  constructor(props) {
    super(props);
    this.datepickerRef = React.createRef();
  }

  selectDate = (date) => {
    console.log(date);
    this.datepickerRef.current.setFocus();
  }

  render() {
    return (
      <div>
        <CustomDatepicker selected={this.state.date} onChange={this.selectDate} ref={this.datepickerRef} />
      </div>
    );
  }
}

In this example, we've used forwardRef to wrap the react-datepicker component, CustomDatepicker. We've also created a ref in the parent component, App, and passed it to the CustomDatepicker. When a date is selected, we console.log the date and set focus on the datepicker, making it useful for forms and user interactions.

📝 Note:

Remember that when using forwardRef with third-party components, ensure that the component supports refs. In the example above, react-datepicker does support refs.

🎯 Quiz

That wraps up our comprehensive guide on React's forwardRef! We've covered what forwardRef is, how it works, and provided a practical example using a third-party component. With this knowledge, you're now ready to use forwardRef in your own projects. Happy coding! 🚀