useRef to access DOM elements

We can utilize React.useRef to get access to the dom element that is rendered by React.

This is useful if we want to interact with the element using imperative APIs e.g. .focus as shown below.

App.tsx

import styles from './App.module.css';
import { useState, useRef } from 'react';

export default function App() {
  const [value, setValue] = useState('');
  const [message, setMessage] = useState('Submit to validate');
  const inputRef = useRef<HTMLInputElement>(null);

  const onSubmit = () => {
    if (!value) {
      setMessage('Please enter a value');
      inputRef.current?.focus();
    } else {
      setMessage('Validated');
    }
  };

  return (
    <div className={styles.root}>
      <input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />
      <p className={styles.message}>{message}</p>
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

Comparison between `useState` and `useRef`

The different between useState and useRef is that:

Updating ref.current does not cause a re-render
Updating the state stored by useState does cause a re-render

The fact that updating ref.current does not cause a re-render is demonstrated in the below example.

App.tsx

import { useEffect, useRef, useState } from 'react';

export default function App() {
  const [value, setValue] = useState('');

  const countRef = useRef<number>(1);
  useEffect(() => {
    countRef.current = countRef.current + 1;
  });

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <div>Rendered: {countRef.current}</div>
    </div>
  );
}

`useRef` for performant storage of non-rendered values

The fact that updating ref.current doesn't result in a re-render means that we can use it as a convenient place to store values that are not rendered to the UI. If we utilize useState for this, it would have causes un-necessary re-renders.

App.tsx

import styles from './App.module.css';
import { useEffect, useRef, useState } from 'react';

export default function App() {
  const [seconds, setSeconds] = useState(0);

  const intervalRef = useRef<number | null>(null);

  const startInterval = () => {
    intervalRef.current = setInterval(() => {
      setSeconds((seconds) => seconds + 1);
    }, 1000);
  }

  const stopInterval = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  }

  useEffect(() => {
    return stopInterval;
  }, []);

  return (
    <div className={styles.vertical}>
      <button onClick={startInterval}>Start</button>
      <button onClick={stopInterval}>Stop</button>
      <div>Time: {seconds}s</div>
    </div>
  );
}

`ref` prop custom callback

The ref prop actually accepts a callback as well. This is useful if you want to know when a element is rendered.

App.tsx

import styles from "./App.module.css";

export default function App() {
  return (
    <div className={styles.root}>
      <input
        ref={(element: HTMLInputElement) => {
          console.log("Callback:", element);
        }}
      />
    </div>
  );
}

Note that the callback is passed the native rendered dom element.

Transcript