What is the useRef hook in React and how do I use it?

What is the useRef hook in React and how do I use it?

The useRef hook in React is used to create a mutable object that persists for the full lifetime of the component. It can hold a reference to a DOM element or any value you want to keep around without causing re-renders.

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>
  );
}

In this example, clicking the button will focus the input field.

What are some common use cases for useRef?

Common use cases for useRef include accessing DOM elements directly, storing mutable values that don't trigger re-renders, and keeping track of previous state values.