react-class-to-hooks

Suggest migrating React class components to hooks with detailed migration path. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages with fix suggestions.

💡 Provides suggestions | 🔧 Automatically fixable

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Identifies React class components that can be migrated to functional components with hooks, providing complexity analysis and migration guidance.

A React class component is a class that extends React's Component or PureComponent, however the file names it (Component, a renamed import, React.Component, a namespace import), declared, written as a class expression, or as an anonymous export default class. A class extending a Component the file declares itself or imports from another library is not one.

An error boundary (a class with componentDidCatch or a static getDerivedStateFromError) is never reported: React has no hooks equivalent, and documents that an error boundary cannot be written as a function component.

ConfigurationCopy Anchor Link

ExamplesCopy Anchor Link

❌ Class ComponentCopy Anchor Link

class UserProfile extends React.Component<Props, State> {
  state = {
    loading: false,
    data: null
  };
  
  componentDidMount() {
    this.fetchData();
  }
  
  fetchData = async () => {
    this.setState({ loading: true });
    const data = await api.getUser(this.props.userId);
    this.setState({ data, loading: false });
  };
  
  render() {
    const { loading, data } = this.state;
    return loading ? <Spinner /> : <div>{data?.name}</div>;
  }
}

✅ Functional Component with HooksCopy Anchor Link

function UserProfile({ userId }: Props) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<User | null>(null);
  
  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      const userData = await api.getUser(userId);
      setData(userData);
      setLoading(false);
    }
    fetchData();
  }, [userId]);
  
  return loading ? <Spinner /> : <div>{data?.name}</div>;
}

Configuration ExamplesCopy Anchor Link

{
  rules: {
    'react-features/react-class-to-hooks': ['warn', {
      ignorePureRenderComponents: false,
      allowComplexLifecycle: false
    }]
  }
}

Lifecycle Method MappingCopy Anchor Link

Comparison with AlternativesCopy Anchor Link

Related RulesCopy Anchor Link

• react-no-inline-functions - Performance optimization
• required-attributes - React attribute enforcement
• no-deprecated-api - API modernization

Further ReadingCopy Anchor Link

• React Hooks Documentation - React hooks reference
• Migrating from Classes to Hooks - Migration guide
• React Codemods - Automated migration tools
• ESLint MCP Setup - Enable AI assistant integration

Known False NegativesCopy Anchor Link

• createReactClass({...}) components are not covered; only classes.
• A superclass the file reaches through a helper (class A extends withRouter(Component)) is not followed.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/react-class-to-hooks": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/react-class-to-hooks': 'error',    },  },});