Referencing Values with Refs

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

import { useRef } from 'react';
let ref = useRef(0);

  current: 0 // The value you passed to useRef
  • Refs are an escape hatch to hold onto values that aren’t used for rendering. You won’t need them often.
  • A ref is a plain JavaScript object with a single property called current, which you can read or set.
  • You can ask React to give you a ref by calling the useRef Hook.
  • Like state, refs let you retain information between re-renders of a component.
  • Unlike state, setting the ref’s current value does not trigger a re-render.
  • Don’t read or write ref.current during rendering. This makes your component hard to predict.

React Doc

Read More