migrateAudit f2d053de

import React, { Component, useRef } from 'react';
import { Button } from './components/Button';
import { Input } from './components/Input';

// Top-level component intentionally mixes a class (string-ref antipattern)
// with a useRef() call so a single file trips Rules 1 and 3.
export class App extends Component {
  override componentDidMount() {
    // Rule 3: react-19-string-refs-removal — `ref="legacyInput"` below.
    // Accessing it via this.refs is the legacy contract that React 19 drops.
    // We log it so the side-effect is visible to a reviewer.
    console.log((this as unknown as { refs: Record<string, unknown> }).refs['legacyInput']);
  }

  override render() {
    // Rule 1: react-19-useref-initial-arg — useRef() with no argument.
    // (Calling a hook inside render() of a class is semantically broken; that
    // is intentional — this fixture exists to exercise rule detection, not to
    // be a well-behaved React app.)
    const focusRef = useRef();

    return (
      <div>
        <Input ref="legacyInput" placeholder="legacy string ref" />
        <Button label="Submit" />
        <button
          ref={(el) => {
            (focusRef as { current: HTMLButtonElement | null }).current = el;
          }}
        >
          Modern
        </button>
      </div>
    );
  }
}

import React, { Component, useRef } from 'react';
import { Button } from './components/Button';
import { Input } from './components/Input';

// Top-level component intentionally mixes a class (string-ref antipattern) with a useRef() call so a single file trips Rules 1 and 3.
export class App extends Component {
  override componentDidMount() {
    // Rule 3: react-19-string-refs-removal — `ref="legacyInput"` below.
    // Accessing it via this.refs is the legacy contract that React 19 drops.
    // We log it so the side-effect is visible to a reviewer.
    console.log((this as unknown as { refs: Record<string, unknown> }).refs['legacyInput']);
  }

  override render() {
    // Rule 1: react-19-useref-initial-arg — useRef() with no argument.
    // (Calling a hook inside render() of a class is semantically broken; that
    // is intentional — this fixture exists to exercise rule detection, not to
    // be a well-behaved React app.)
    const focusRef = useRef(null);

    return (
      <div>
        <Input ref="legacyInput" placeholder="legacy string ref" />
        <Button label="Submit" />
        <button
          ref={(el) => {
            (focusRef as { current: HTMLButtonElement | null }).current = el;
          }}
        >
          Modern
        </button>
      </div>
    );
  }
}

import React from 'react';
import PropTypes from 'prop-types';
import type { ButtonProps } from '../types';

export function Button(props: ButtonProps) {
  return (
    <button type="button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

// Rule 2: react-19-defaultprops-removal — defaultProps on a function component.
Button.defaultProps = {
  label: 'Click me',
};

// Rule 5: react-19-proptypes-removal — propTypes on a function component.
Button.propTypes = {
  label: PropTypes.string,
  onClick: PropTypes.func,
};

import React from 'react';
import type { ButtonProps } from '../types';

export function Button(props: ButtonProps) {
  return (
    <button type="button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

// Rule 2: react-19-defaultprops-removal — defaultProps on a function component.
// Converted to default destructuring in function parameters.
function Button({ label = 'Click me', onClick }: ButtonProps) {
  return (
    <button type="button" onClick={onClick}>
      {label}
    </button>
  );
}

// Rule 5: react-19-proptypes-removal — propTypes on a function component.
// Removed PropTypes definitions and migrated to TypeScript interfaces.
// Note: PropTypes are still supported on class components but deprecated.

import React, { useRef, forwardRef, type Ref } from 'react';

interface InputProps {
  placeholder: string;
}

// forwardRef stays compatible across React 18 → 19; what trips the rule here
// is the internal useRef() call without an argument (Rule 1).
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  props,
  ref: Ref<HTMLInputElement>,
) {
  // Rule 1: react-19-useref-initial-arg — useRef() with no argument.
  const internalRef = useRef();
  void internalRef;

  return <input placeholder={props.placeholder} ref={ref} />;
});

import React, { useRef, forwardRef, type Ref } from 'react';

interface InputProps {
  placeholder: string;
}

// forwardRef stays compatible across React 18 → 19; what trips the rule here
// is the internal useRef() call without an argument (Rule 1).
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref: Ref<HTMLInputElement>) {
  // Rule 1: react-19-useref-initial-arg — useRef() with no argument.
  // Updated to provide an initial argument.
  const internalRef = useRef(null);

  return (
    <input placeholder={props.placeholder} ref={ref} />
  );
});

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

// Rule 4: react-19-reactdom-render-removal — ReactDOM.render() is gone in v19.
ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

// Rule 4: react-19-reactdom-render-removal — ReactDOM.render() is gone in v19.
// Migrated to the concurrent rendering API using createRoot.
const root = createRoot(document.getElementById('root'));
root.render(<App />);