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.

References

React Doc