Unlocking the Power of Refs in React: Different Ways to Use Refs for Dynamic UI Control

Introduction:

In React, refs are a powerful tool that allows you to interact with DOM elements and React components directly. While most developers are familiar with the basic usage of refs to access DOM nodes, there are several other, less commonly discussed ways to leverage refs to build more dynamic and responsive applications.

In this article, we’ll explore the different ways refs can be used in React, providing practical examples for each scenario. Whether you're looking to manage focus, control animations, or share state between components, refs offer a versatile solution.

1. Accessing DOM Elements

The most common use case for refs in React is to directly access and manipulate DOM elements. This is particularly useful when you need to focus an input field, scroll to a specific part of the page, or interact with third-party libraries that require direct DOM manipulation.

Example:

import React, { useRef } from 'react';
const FocusInput = () => {
  const inputRef = useRef();
  const handleFocus = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input ref={inputRef} placeholder="Click the button to focus" />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
};
export default FocusInput;