How to fix Warning: String "ref" is deprecated and will be removed in React

# Search for string refs in your codebase
grep -r 'ref="' src/
grep -r "ref='" src/
grep -r 'this.refs' src/

function MyComponent() {
  const handleClick = () => {
    // This won't work with function components
    this.refs.inputRef.focus();
  };

  return <input ref="inputRef" />;
}

import { useRef } from 'react';

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

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

  return <input ref={inputRef} />;
}

class MyComponent extends React.Component {
  handleClick = () => {
    this.refs.inputRef.focus();
  }

  render() {
    return <input ref="inputRef" />;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    this.inputRef.current?.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

function MyComponent() {
  const [inputElement, setInputElement] = React.useState(null);

  const handleRef = (element) => {
    setInputElement(element);
    // You can perform actions when the ref is set
    if (element) {
      console.log('Input mounted:', element);
    }
  };

  return <input ref={handleRef} />;
}

class MyComponent extends React.Component {
  inputRef = null;

  setRef = (element) => {
    this.inputRef = element;
  }

  render() {
    return <input ref={this.setRef} />;
  }
}

# Check for outdated packages
npm outdated

# Update specific package
npm update package-name

# Or update to latest version
npm install package-name@latest

// Example test with React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('input ref works correctly', () => {
  render(<MyComponent />);
  const input = screen.getByRole('textbox');

  // Verify ref-based operations work
  expect(document.activeElement).not.toBe(input);
  userEvent.click(screen.getByText('Focus Input'));
  expect(document.activeElement).toBe(input);
});