How do I use refs in React?

How do I use refs in React?

Refs in React are used to access DOM elements directly. You can create a ref using React.createRef() and attach it to a component.

Can you show me an example of using refs?

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 a ref for an input element and focuses it when the button is clicked.

What are the differences between refs and state?

Refs are used to access and interact with DOM elements directly, while state is used to manage and trigger re-renders in your component.

When should I use refs instead of state?

You should use refs when you need to interact with a DOM element directly, such as focusing an input or measuring its size, without causing a re-render.