What are refs in React and how do I use them?

What are refs in React and how do I use them?

Refs in React are a way to access DOM nodes or React elements directly. You can create refs using React.createRef() or the useRef hook.

Can you give me an example of how to use refs in a functional component?

Sure! Here's a simple example:

import React, { useRef } from 'react';

const 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.

Are there any downsides to using refs?

Yes, while refs are useful, they can lead to less readable code if overused. They should be used sparingly, mainly for managing focus, text selection, or integrating with third-party libraries.

When should I prefer using refs over state?

You should prefer refs when you need to interact with the DOM directly or when you want to avoid re-rendering the component. State should be used for data that affects rendering.