How to Use ForwardRef in React

React js with forwardRef function provides parent components “forward” (move down) refs to their child components. When a parent component of a React component is referenced by a child component using the ForwardRef function, then A DOM entity is generated. The child can read and modify elements automatically using a script.

Syntax

The following syntax shows the React js with the forwardRef function.

  1. React.forwardRef((props, ref) => {})
  • It accepts a function in props with ref arguments as parameters.
  • Return Value: A JSX Element is the result of this function.

React Application Development

The following steps are used to develop a react application.

Step 1:

Use the command to create a React.Js Development:

  1. npx create-react-app folder_name

Step 2:

The following command is used to move your project folder. It works after creating a folder with a name such as folder_name.

  1. cd folder_name

How to Implement ForwardRef?

In React, parent components utilise props to provide data to their children. Consider creating a child component with additional accessories to change the actions.

  • We need to modify the behaviour of a child component without the state or redraw the component.
  • We can accomplish the behaviour of the child component using refs. Elements represent the DOM nodes. It can be accessed using references of the nodes.
  • We can change it without impacting its current state or re-rendering it.
  • The parent component has to provide a method for the child to obtain the ref. The child component must connect to the current node of its parent node. The Ref forwarding is the method’s name for the react.js implementation procedure.

Examples

The following examples show the forwardRef of the React.Js.

Example 1:

The following example is used to get the working procedure of the forward. The input tag with the focus button shows on the web page. The focus function works for the input field if we click the button.

  1. import * as React from “react”;
  2. import ReactDOM from “react-dom”;
  3. export default function App() {
  4.  const ref_var = React.useRef();
  5.  function focus() {
  6.    ref_var.current.focus();
  7.  }
  8.  return (
  9.    <div className = “App”>
  10.      <input ref = { ref_var} placeholder = “write input data” />
  11.      <button className = “button” onClick = {focus}> Focus </button>
  12.    </div>
  13.  );
  14. }
  15. const rootElement_var = document.getElementById(“root”);
  16. ReactDOM.render(<App />, rootElement_var);

Output:

The form elements and their operation are shown as output.

How to Use ForwardRef in React

Example 2:

If we click the button without data, the function does not work for the forwardRef.

  1. import { useState } from “react”;
  2. import reactLogo from “./assets/react.svg”;
  3. import viteLogo from “/vite.svg”;
  4. import “./App.css”;
  5. import * as React from “react”;
  6. import ReactDOM from “react-dom”;
  7. export default function App() {
  8.  const ref_var = React.useRef();
  9.  function focus() {
  10.    ref_var.current.focus();
  11.    alert(“Please fill data in input field”);
  12.  }
  13.  return (
  14.    <div className = “App”>
  15.      <input ref = { ref_var} placeholder = “write input data” required/>
  16.      <button className = “button” onClick = {focus}> Submit </button>
  17.    </div>
  18.  );
  19. }
  20. const rootElement_var = document.getElementById(“root”);
  21. ReactDOM.render(<App />, rootElement_var);

Output:

The form elements and their operation are shown as output.

How to Use ForwardRef in React

How Significant is ForwardRef?

The following list shows how important forwardRef is in React JS.

  • The forwardRef is significant to enable more adaptable and effective component composition in React.
  • There are multiple times operations with complicated applications. The parent component needs direct access to a child component of the DOM element or instance.
  • The multiple-time functionalities work due to React’s default behaviour. It is possible when working with higher-order or wrapper components (HOCs).
  • We can send an identifier from a parent component to the child component using forwardRef. It works after the child component is contained within another component.
  • It provides direct communication between the parent component and the DOM element or object of the child.

Example

The following code shows the default use of the forwardRef in React JS. When we click the button, counter count and increment by 1.

  1. import React from ‘react’
  2. class App extends React.Component {
  3. constructor(props) {
  4. super(props)
  5. this.aRef = React.createRef()
  6. }
  7. render() {
  8. return (
  9. <>
  10. <counter ref={this.aRef} />
  11. <button onClick={() => { console.log(this.aRef) }}>
  12. Ref
  13. </button>
  14. </>
  15. )
  16. }
  17. }
  18. const Counter_info = React.forwardRef((props, ref) => {
  19. class Counter_info extends React.Component {
  20. constructor(props) {
  21. super(props)
  22. this.state = {
  23. count: 0
  24. }
  25. }
  26. render() {
  27. return (
  28. <div>
  29. Count of Value: {this.state.count}
  30. <button ref={ref} onClick={() => this.setState(
  31. { count: this.state.count + 1 })}>
  32. Increment
  33. </button>
  34. </div>
  35. )
  36. }
  37. }
  38. return < Counter_info />
  39. })
  40. export default App

Output:

The counter with a button shows as an output.

How to Use ForwardRef in React

Explanation

  • The value of the ref attribute on the button element is set in the ref parameter, such as a Counter component.
  • The App component renders the Counter component.
  • First, the ref is created.
  • The ref attribute of the Counter component is given the value aRef.
  • The HTMLButtonElement of the button in the Counter component is stored in aRef.
  • The Ref button’s click will confirm the functional count with Ref and the HTML button element object used as the button.
  • The Counter component is transmitted to the child component, and the increment is per button click.

Forwarding refs in React using ForwardRef

The parent component needs to transmit the ref to the child when the child component needs to reference the current node of its parent component. Referencing is the term for the method of the forwardRef.

A ref is automatically passed via a component to one of its children using the ref forwarding approach. It is most required to create reusable component libraries. It helps to pass the ref to a child component and utilise the forwardRef function.

The component uses the FancyButton to obtain a ref to the underlying button DOM node and utilise it as required.

Here is a step-by-step breakdown of what transpires in the example above:

  • By invoking React, we produce a React ref.Make a ref variable as a recipient of createRef.
  • We declare our ref as a JSX attribute and pass it to the fancy button as a ref.
  • React gives the ref as a second argument to the “(props, ref)” method inside forwardRef.
  • By designating this ref parameter as a JSX attribute, we pass it down to the <button ref={ref}>
  • When the ref is attached, the ref.current draws attention to the DOM node as a “button.”

Example

The given example works with the button click and input data. When you click the given button, an alert message shows on the alert box.

  1. import { useState } from “react”;
  2. import reactLogo from “./assets/react.svg”;
  3. import viteLogo from “/vite.svg”;
  4. import “./App.css”;
  5. import * as React from “react”;
  6. import ReactDOM from “react-dom”;
  7. const InputText = React.forwardRef((props, ref) => (
  8. <input ref={ref} {…props} />
  9. ));
  10. export default function App() {
  11. const ref = React.useRef();
  12. function focus() {
  13. ref.current.focus();
  14. alert(“work properly”);
  15. }
  16. return (
  17. <div className=“App”>
  18. <InputText ref={ref} placeholder = “my input” />
  19. <button className = “button” onClick = {focus}>Focus</button>
  20. </div>
  21. );
  22. }
  23. const rootElement = document.getElementById(“root”);
  24. ReactDOM.render(<App />, rootElement);

Output:

The counter with a button shows as an output.

How to Use ForwardRef in React

Using References Improperly in React

The ref’s feature enables direct interaction between developers and DOM elements and components. There are several circumstances where there may be better action than using references. To name a few:

  • Misuse of DOM manipulation

React promotes a declarative approach to UI development. It is essential to steer clear of using references for direct DOM manipulation. Most UI modifications can be handled using component state and props.

  • stateless component overuse of refs

Functional parts are frequently designed to become straightforward and stateless. Consider splitting a functional component into smaller ones. You frequently use multiple references or move state management to a higher-level component. The stateless component is used multiple times.

  • data flow references

Refs must refrain from utilising in place of prop passing or state management. State management tools like Redux or React’s Context API are used, but component props should be the primary channel for data flow.

  • replacing controlled components with references

Use controlled components in form elements whenever possible (by setting the value and managing input changes using state and event handlers). When there is a specific necessity for easy access to the DOM element, references should only be utilised for uncontrolled components.

  • accessing the internal state of child components

Using references to access a child component’s internal state or methods is not recommended. Instead, connect between parent and child components using callbacks or additional state management methods.

Conclusion

Refs are an effective tool in React that enables instant access to DOM nodes, opening up many methods and possibilities for creating cleaner, more feature-rich, and more performant components.

Similar Posts