Harnessing the Power of useRef Hook in React

A concise guide on how to access refs in React using the useRef Hook. Dive into the essentials with examples and code snippets.

( tag: react, tag: hooks, tag: useRef )

React’s useRef Hook allows us to access and interact with elements in the DOM directly. It retains its mutable .current property across multiple renders, making it a great tool for preserving values without re-rendering components.

Here’s a simple example of how useRef can be used:

import React, { useRef } from 'react';

function ExampleComponent() {
  const inputRef = useRef();

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

export default ExampleComponent;

In this example, useRef is used to create a reference (inputRef) to an input element. The handleClick function triggers a focus on this input when the button is clicked.

Remember, useRef does not notify you when its content changes. Mutating the .current property won’t cause a re-render. If you need to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.