Ref With Functional Component: A Complete Guide

How do you handle direct DOM manipulation in a React function component?

Working with ref with functional components can feel different if you're used to class components. But React provides simple ways to manage DOM elements without class-based refs.

In this blog, we'll look at different ways to use refs in function components. You'll learn about useRef, ref forwarding, and callback refs. By the end, you'll know when and how to use each method while keeping your app smooth and responsive.

Understanding ref in React

In React, the ref attribute is used to get a reference to a DOM node or a React component instance without triggering a re-render. This is useful when you need to:

• Access DOM nodes directly.

• Handle focus input events dynamically.

• Control media playback (e.g., videos, audio).

• Implement imperative animations.

• Avoid overuse refs while dealing with state management.

Unlike class components, where React.createRef() is used to create refs, functional components leverage the useRef hook to interact with DOM elements efficiently.

Using useRef in Functional Components

The useRef hook allows you to persist a reference across renders without causing a re-render.

The following Mermaid diagram illustrates how ref interacts with different React components and DOM elements:

Explanation:

• A functional component initializes a ref using useRef(null).

• The ref creates a reference object that persists across renders.

• The ref attribute is assigned to a DOM element.

• The ref’s current property allows us to directly access and manipulate the DOM element inside event handlers or effects.

Here’s a simple example of how to use useRef to focus input when a button is clicked:

Copy
import React, { useRef } from "react";

const InputFocus = () => {
  const inputRef = useRef(null); // useref null

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus(); // focus input
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type something..." /> {/* input element */}
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default InputFocus;

Explanation

• We create a useRef hook with null as the initial value (useref null).

• The ref is assigned to the input element via the ref attribute.

• On button click, the current property of the ref is accessed to trigger focus().

• This does not cause a re-render, making it efficient.

Using Callback Refs

Callback refs provide a more dynamic way to assign refs and are useful when working with dynamically created DOM nodes.

Copy
import React, { useState } from "react";

const DynamicInput = () => {
  const [inputRef, setInputRef] = useState(null); // useref null

  const handleClick = () => {
    if (inputRef) {
      inputRef.focus(); // focus input
    }
  };

  return (
    <div>
      <input ref={setInputRef} type="text" placeholder="Dynamic Ref Example" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default DynamicInput;

Explanation

• Instead of useRef, we use a state variable to store the ref value.

• The ref attribute is set to a function (setInputRef) which receives the DOM node as its argument.

• This enables us to dynamically manage refs, making it flexible for dynamically generated DOM elements.

Handling Refs with Ref Forwarding

Ref forwarding allows a parent component to pass a ref down to a child component, enabling direct interaction with its DOM node.

Explanation

• forwardRef is used to allow the parent component to pass a ref to a child component.

• The ref attribute is assigned to the input element inside the child component.

• The parent component can then call on the child component’s DOM node.

Advanced Use Cases for ref

Managing Focus in Forms

Refs can be useful in managing focus when handling form validation and error messages.

Triggering Imperative Animations

Refs can also be useful for triggering imperative animations, such as controlling CSS transitions.

Best Practices When Using ref in Functional Components

1. Avoid Overuse: Using refs too frequently (overuse refs) can lead to unreadable code. Prefer state management for UI updates.

2. Escape Hatch: Refs act as an escape hatch, allowing you to manipulate DOM nodes when state-based reactivity is unnecessary.

3. Avoid Memory Leaks: Always clean up event listeners attached to refs to avoid memory leaks.

4. Use Forwarded Ref Wisely: Pass refs only when necessary to avoid unnecessary complexity.

Final Thoughts on Using Ref in Functional Components

Using ref with functional components helps manage DOM elements, focus inputs, and handle animations. It makes React applications more interactive and responsive.

Stick to state-driven updates when possible. Overusing refs can make code harder to maintain. Use them only when needed for direct DOM interactions.

With the right approach, refs can improve functionality while keeping the code clean and easy to read.

import React, { useRef, forwardRef } from "react";

const Input = forwardRef((props, ref) => {
  return <input ref={ref} type="text" placeholder="Forwarded Ref Example" />;
});

const ParentComponent = () => {
  const inputRef = useRef(null); // useref null

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus(); // focus input
    }
  };

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

const FormComponent = () => {
  const inputRef = useRef(null); // useref null
  const [error, setError] = useState("");

  const handleSubmit = () => {
    if (!inputRef.current.value) {
      setError("This field is required!"); // error message
      inputRef.current.focus(); // manage focus
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter name" />
      {error && <p>{error}</p>}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

import React, { useRef } from "react";

const AnimatedBox = () => {
  const boxRef = useRef(null);

  const animate = () => {
    if (boxRef.current) {
      boxRef.current.style.transform = "scale(1.2)";
      boxRef.current.style.transition = "transform 0.3s";
    }
  };

  return (
    <div>
      <div ref={boxRef} style={{ width: 100, height: 100, background: "blue" }} />
      <button onClick={animate}>Animate</button>
    </div>
  );
};

export default AnimatedBox;