How to fix Function components cannot have string refs in React

# Search for ref=" patterns
grep -r 'ref="[^{]' src/

# Or use your editor's search functionality
# Look for patterns like: ref="myRef"

// Before (deprecated)
class MyComponent extends React.Component {
  handleClick = () => {
    this.refs.myInput.focus();
  }

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

// After (callback ref)
class MyComponent extends React.Component {
  handleClick = () => {
    this.myInput.focus();
  }

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

import React from 'react';

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

  handleClick = () => {
    // Access via .current property
    this.myInput.current.focus();
  }

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

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={myInput} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

// Before
this.refs.myInput.value
this.refs.myDiv.scrollTop

// After (callback ref)
this.myInput.value
this.myDiv.scrollTop

// After (createRef/useRef)
this.myInput.current.value
this.myDiv.current.scrollTop

# Update all dependencies to latest versions
npm update

# Or check for specific outdated packages
npm outdated

# Update specific packages
npm install react-component-name@latest

// .eslintrc.json
{
  "extends": ["react-app"],
  "rules": {
    "react/no-string-refs": "error"
  }
}