{"id":19210,"library":"babel-plugin-transform-react-class-to-function","title":"babel-plugin-transform-react-class-to-function","description":"A Babel 7 plugin that transforms React class components into functional components. Current stable version is 1.2.2. Release cadence is low; last update was several years ago. Key differentiator: automates conversion to reduce bundle size, avoids manual refactoring. Compared to alternatives like babel-plugin-transform-react-pure-class-to-function, it supports Babel 7 and offers a 'memo' option to handle PureComponent and shouldComponentUpdate.","status":"maintenance","version":"1.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function","tags":["javascript","babel","babel-plugin","react"],"install":[{"cmd":"npm install babel-plugin-transform-react-class-to-function","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-react-class-to-function","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-react-class-to-function","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency to run the Babel plugin.","package":"@babel/core","optional":false}],"imports":[{"note":"Plugin is typically used in babel.config.js as a string identifier, not imported directly.","wrong":"const plugin = require('babel-plugin-transform-react-class-to-function')","symbol":"default","correct":"import plugin from 'babel-plugin-transform-react-class-to-function'"},{"note":"In babel.config.js, use the plugin name string, not the module object.","wrong":"module.exports = { plugins: [require('babel-plugin-transform-react-class-to-function')] }","symbol":"plugin","correct":"module.exports = { plugins: ['babel-plugin-transform-react-class-to-function'] }"},{"note":"When using Node API, pass plugin name as string, not the module.","wrong":"transformSync(code, { plugins: [require('babel-plugin-transform-react-class-to-function')] })","symbol":"transformSync","correct":"import { transformSync } from '@babel/core'; transformSync(code, { plugins: ['babel-plugin-transform-react-class-to-function'] })"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  plugins: ['babel-plugin-transform-react-class-to-function']\n};\n\n// Input: class Hello extends React.Component { render() { return <div>Hi</div> } }\n// Output: const Hello = () => <div>Hi</div>","lang":"javascript","description":"Demonstrates basic usage of the plugin in Babel configuration to transform a React class component to a function."},"warnings":[{"fix":"Ensure classes extend React.Component or PureComponent directly, not custom superclasses.","message":"Transforms only components extending React.Component or React.PureComponent; custom base classes are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use this plugin for components that have no lifecycle methods or state; otherwise, refactor manually.","message":"Lifecycle methods other than render (e.g., componentDidMount) are removed, which may break functionality.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set options: { memo: true } to handle PureComponent; manually memoize components with custom shouldComponentUpdate.","message":"The 'memo' option wraps components in React.memo but does not convert if shouldComponentUpdate is implemented without PureComponent.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev babel-plugin-transform-react-class-to-function","cause":"Plugin not installed as a dependency.","error":"Error: Cannot find module 'babel-plugin-transform-react-class-to-function'"},{"fix":"Ensure your Babel configuration includes presets for React and modern JavaScript (e.g., @babel/preset-react, @babel/preset-env).","cause":"Plugin encountered a class component that it could not parse, possibly due to unsupported syntax.","error":"TypeError: Cannot read property 'replaceWith' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}