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

What this error means

This warning appears when you're using the legacy string ref syntax in React components. String refs were the original way to reference DOM elements or component instances in React, but they've been deprecated since React 16.3 (March 2018) and are being completely removed in React 19. String refs look like this: `<input ref="myInput" />` and are accessed via `this.refs.myInput`. While they seem simple, they have several fundamental problems: - **Not composable**: If a wrapper component also uses a string ref with the same name, they overwrite each other - **Poor debugging**: Errors are harder to trace when refs collide - **No TypeScript support**: String refs don't work well with static type checking - **Framework complexity**: They require React to maintain a special refs object on every component instance React's core team deprecated string refs in favor of callback refs, createRef, and the useRef hook, which provide better type safety, composability, and debugging capabilities.

Typical symptoms

• Warning message in browser console: "String ref is deprecated"
• ESLint warning: "Using string literals in ref attributes is deprecated (react/no-string-refs)"
• Build warnings when upgrading to React 18.3 or preparing for React 19
• Application works normally but shows deprecation warnings in development
• Warning appears for each component using string refs

Common causes

1. Using legacy string ref syntax like ref="myRef" in class or function components
2. Accessing refs via this.refs.myRef in class components
3. Old codebase that hasn't been updated since before React 16.3
4. Following outdated tutorials or documentation that predate 2018
5. Third-party libraries still using string refs internally

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

# 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);
});

Advanced notes

// React 19+
function MyInput({ ref }) {
  return <input ref={ref} />;
}

// ❌ Avoid: Creates new function every render
<input ref={(el) => this.inputRef = el} />

// ✅ Better: Stable function reference
<input ref={this.setInputRef} />

import { useRef } from 'react';

function MyComponent() {
  // Type is inferred from initial value
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    // TypeScript knows inputRef.current might be null
    inputRef.current?.focus();
  };

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

Frequently asked questions

What does "Warning: String "ref" is deprecated and will be removed" mean?

This warning appears when you're using the legacy string ref syntax in React components. 3 (March 2018) and are being completely removed in React 19. myInput.

How do I fix "Warning: String "ref" is deprecated and will be removed"?

React is warning that string-based refs (e.g., ref="myInput") are deprecated. String refs have multiple downsides including poor composability, debugging issues, and will be removed in React 19. You need to migrate to useRef, createRef, or callback refs.

What causes "Warning: String "ref" is deprecated and will be removed"?

Using legacy string ref syntax like ref="myRef" in class or function components Accessing refs via this.refs.myRef in class components Old codebase that hasn't been updated since before React 16.3

Is the "Warning: String "ref" is deprecated and will be removed" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Strings are not allowed as React children. Did you mean to use an array?

  Strings are not allowed as React children

  LOW

• Function components cannot have string refs

  How to fix "Function components cannot have string refs" in React

  MEDIUM

• Warning: Did not expect server HTML to contain a <style> tag

  How to fix "Did not expect server HTML to contain a <style> tag" in React

  MEDIUM

• Type "string" is not assignable to type "React.ReactNode"

  Type "string" is not assignable to type "React.ReactNode"

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation