How do I use useRef in React?

How do I use useRef in React?

You can use the useRef hook to create a mutable object that persists for the full lifetime of the component. It’s often used to access DOM elements directly.

Can you give me an example of how to use it?

Sure! Here's a simple example:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

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

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

This code creates an input field and a button that focuses the input when clicked.

What are some common use cases for useRef?

Common use cases include accessing DOM elements, storing mutable values that don’t trigger re-renders, and keeping a reference to previous state values.