ReactJs — Refs and useRef Hook

Refs are used to directly access DOM elements or persist values across renders without causing re-renders. The useRef hook helps manage these references.

import React, { useRef } from 'react';

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

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

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

export default InputFocus;