Legacy React Component Creation API

Common errors

• Warning: React.createClass is deprecated and will be removed in a future major release. Use ES6 classes or the `create-react-class` package instead.

  cause Using `React.createClass` directly from the `react` package, which is now deprecated within `react` itself, instead of the standalone `create-react-class` package.
  fix Replace `React.createClass` with `import createReactClass from 'create-react-class';` and use the imported function to maintain compatibility for legacy code. For new development or full migration, use ES6 classes or functional components.

• Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

  cause Attempting to use a component defined with `createReactClass` in a way that is incompatible with modern React's reconciliation process or rendering expectations, such as passing component instances directly as children where only React elements are expected.
  fix Ensure that components are instantiated as React elements (e.g., `React.createElement(MyComponent)` or `<MyComponent />`) and verify how they are being consumed by parent components or higher-order components. This error often indicates a fundamental mismatch in component usage.

• Error: `this` is undefined (or similar reference error) within an event handler or lifecycle method of a class component.

  cause Confusion between `createReactClass`'s automatic `this` binding and the explicit binding requirement in ES6 class components, leading to `this` not being correctly scoped after a component has been migrated.
  fix If this error occurs after migrating from `createReactClass` to an ES6 class, ensure that event handlers are explicitly bound in the constructor (`this.method = this.method.bind(this);`) or defined as arrow functions using public class fields syntax (`method = () => { ... };`).

Warnings

• deprecated The `createReactClass` API and its associated patterns (e.g., mixins) are officially deprecated by the React team. It is strongly recommended to migrate to ES6 class components or, preferably, functional components with React Hooks.
  Fix: Refactor existing `createReactClass` components to use ES6 classes or modern functional components with Hooks. Consider tools like `react-codemod` for automated migration assistance.
• breaking `createReactClass` components are largely incompatible with modern React features such as Hooks, Context API (`useContext`), and advanced optimizations in Concurrent Mode. Mixing paradigms can lead to unexpected behavior or errors.
  Fix: Isolate legacy components and prioritize migration. For new development, always use modern React APIs (functional components with Hooks, ES6 classes).
• gotcha The `mixins` feature, which allowed components to reuse logic, is exclusive to `createReactClass` and is not supported in ES6 class components or functional components. Attempting to use mixins with modern React will fail.
  Fix: Replace mixin functionality with higher-order components (HOCs), render props, or custom Hooks when migrating components.
• gotcha Unlike ES6 class components where `this` requires explicit binding in event handlers (or arrow functions/public class fields), `createReactClass` automatically binds `this` to the component instance for all methods. This difference can cause confusion during migration.
  Fix: When migrating from `createReactClass` to ES6 classes, remember to explicitly bind `this` in the constructor for event handlers (e.g., `this.handleClick = this.handleClick.bind(this);`) or define handlers as arrow functions (e.g., `handleClick = () => { ... };`).

Install

• npm install create-react-class npm
• yarn add create-react-class yarn
• pnpm add create-react-class pnpm

Imports

• createReactClass
  wrong:

  const createReactClass = require('create-react-class').createReactClass;

  correct:

  import createReactClass from 'create-react-class';

  This package exports `createReactClass` as its default export. For CommonJS, `require('create-react-class')` directly returns the function. Attempting to destructure it as a named export from a `require` call will result in `undefined`.

Quickstart

Demonstrates creating and rendering a simple stateful React component using the legacy `createReactClass` API, highlighting its object-based definition and automatic `this` binding.

import createReactClass from 'create-react-class';
import React from 'react';
import ReactDOM from 'react-dom';

const MyLegacyComponent = createReactClass({
  displayName: 'MyLegacyComponent',
  getInitialState: function() {
    return { count: 0 };
  },
  handleClick: function() {
    // `this` is automatically bound in createClass components
    this.setState({ count: this.state.count + 1 });
  },
  render: function() {
    return React.createElement(
      'div',
      null,
      React.createElement('h1', null, `Count: ${this.state.count}`),
      React.createElement('button', { onClick: this.handleClick }, 'Increment Count')
    );
  }
});

// For demonstration, render to a hypothetical root element
// In a real app, ensure 'root' element exists in your HTML
const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.render(
    React.createElement(MyLegacyComponent, null),
    rootElement
  );
} else {
  console.warn("Root element 'root' not found. Component not rendered.");
}