{"id":10679,"library":"create-react-class","title":"Legacy React Component Creation API","description":"The `create-react-class` package provides a way to define React components using a plain JavaScript object, mirroring the `React.createClass` API that was prevalent before the widespread adoption of ES6 classes and functional components with Hooks. Currently at version 15.7.0, this library serves as a drop-in replacement for the original `React.createClass`, which was extracted from the core `react` package into a standalone library. Its primary purpose is to support legacy codebases that have not yet migrated to modern React paradigms. The package itself is largely in a maintenance-only state, receiving no significant feature updates, as React development has shifted towards newer component patterns. Key differentiators include automatic `this` binding and support for `mixins`, features not present in ES6 class components or functional components.","status":"deprecated","version":"15.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","react"],"install":[{"cmd":"npm install create-react-class","lang":"bash","label":"npm"},{"cmd":"yarn add create-react-class","lang":"bash","label":"yarn"},{"cmd":"pnpm add create-react-class","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package provides a legacy API for defining React components and functions as a shim; it requires the core React library to be installed and available at runtime as a peer dependency.","package":"react","optional":false}],"imports":[{"note":"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`.","wrong":"const createReactClass = require('create-react-class').createReactClass;","symbol":"createReactClass","correct":"import createReactClass from 'create-react-class';"}],"quickstart":{"code":"import createReactClass from 'create-react-class';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst MyLegacyComponent = createReactClass({\n  displayName: 'MyLegacyComponent',\n  getInitialState: function() {\n    return { count: 0 };\n  },\n  handleClick: function() {\n    // `this` is automatically bound in createClass components\n    this.setState({ count: this.state.count + 1 });\n  },\n  render: function() {\n    return React.createElement(\n      'div',\n      null,\n      React.createElement('h1', null, `Count: ${this.state.count}`),\n      React.createElement('button', { onClick: this.handleClick }, 'Increment Count')\n    );\n  }\n});\n\n// For demonstration, render to a hypothetical root element\n// In a real app, ensure 'root' element exists in your HTML\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.render(\n    React.createElement(MyLegacyComponent, null),\n    rootElement\n  );\n} else {\n  console.warn(\"Root element 'root' not found. Component not rendered.\");\n}\n","lang":"javascript","description":"Demonstrates creating and rendering a simple stateful React component using the legacy `createReactClass` API, highlighting its object-based definition and automatic `this` binding."},"warnings":[{"fix":"Refactor existing `createReactClass` components to use ES6 classes or modern functional components with Hooks. Consider tools like `react-codemod` for automated migration assistance.","message":"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.","severity":"deprecated","affected_versions":"All versions"},{"fix":"Isolate legacy components and prioritize migration. For new development, always use modern React APIs (functional components with Hooks, ES6 classes).","message":"`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.","severity":"breaking","affected_versions":"All versions (relative to modern React versions)"},{"fix":"Replace mixin functionality with higher-order components (HOCs), render props, or custom Hooks when migrating components.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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 = () => { ... };`).","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Using `React.createClass` directly from the `react` package, which is now deprecated within `react` itself, instead of the standalone `create-react-class` package.","error":"Warning: React.createClass is deprecated and will be removed in a future major release. Use ES6 classes or the `create-react-class` package instead."},{"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.","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.","error":"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."},{"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 = () => { ... };`).","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.","error":"Error: `this` is undefined (or similar reference error) within an event handler or lifecycle method of a class component."}],"ecosystem":"npm"}