React & Next.js

Understanding and Utilizing React’s forwardRef and useRef

0

React is a component-based UI library that emphasizes efficient state management and data flow between components. However, there are times when direct access to specific DOM elements or component instances is necessary. Two useful React hooks for this purpose are `forwardRef` and `useRef`. This article will explain the concepts and usage of these two hooks in detail, and provide practical examples to demonstrate their utilization.

forwardRef

Passing refs to child components

`forwardRef` allows a parent component to access a child component’s DOM elements or class instances. This is particularly useful for integrating with external libraries or when DOM manipulation is needed.

Usage

1. Basic usage
   import React, { forwardRef } from 'react';

   const MyComponent = forwardRef((props, ref) => (
     <div ref={ref}>
       {props.children}
     </div>
   ));

   export default MyComponent;

Here, `forwardRef` connects the ref received by `MyComponent` from its parent component to its own div element.

2. Using ref in parent component
   import React, { useRef } from 'react';
   import MyComponent from './MyComponent';

   const ParentComponent = () => {
     const myRef = useRef(null);

     return (
       <div>
         <MyComponent ref={myRef}>
           Hello, World!
         </MyComponent>
         <button onClick={() => console.log(myRef.current)}>Check Ref</button>
       </div>
     );
   };

   export default ParentComponent;

In this example, `ParentComponent` creates a `myRef` using `useRef`, and passes it to `MyComponent`, allowing direct access to the div element. Clicking the button logs the referenced element to the console.

useRef

Managing references in functional components

`useRef` is used to create and manage references in functional components. It is primarily used for accessing DOM elements or storing values, and the stored values persist across re-renders of the component.

Usage

1. Accessing DOM elements
   import React, { useRef, useEffect } from 'react';

   const MyComponent = () => {
     const myRef = useRef(null);

     useEffect(() => {
       myRef.current.focus();
     }, []);

     return <input ref={myRef} type="text" />;
   };

   export default MyComponent;

`MyComponent` uses `useRef` to create a reference to the input element and sets focus on it when the component mounts using `useEffect`.

2. Storing values

`useRef` is also useful for storing values, preventing re-renders when the value changes.

   import React, { useRef } from 'react';

   const Counter = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current += 1;
       console.log(countRef.current);
     };

     return (
       <div>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

   export default Counter;

In this example, `useRef` is used to create `countRef`, which retains its value across component re-renders. Each button click increments and logs the current value of `countRef.current`.

Conclusion

React’s `forwardRef` and `useRef` are powerful tools for managing references between components. `forwardRef` is used to pass refs from parent to child components, while `useRef` is utilized in functional components to reference DOM elements or store values. Proper use of these hooks can make component interactions more flexible and enable efficient implementation of complex UI interactions. As a React developer, mastering these hooks will enhance your ability to create robust and interactive UIs.

Leave a Reply