{"record":{"id":"b51bc3ca0f5bd2ca","repo":"mobxjs/mobx","slug":"the-componentwillreact-life-cycle-event-is-no-long","errorCode":null,"errorMessage":"The componentWillReact life-cycle event is no longer supported","messagePattern":"The componentWillReact life-cycle event is no longer supported","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/mobx-react/src/observerClass.ts","lineNumber":70,"sourceCode":"    })\n}\n\nexport function makeClassComponentObserver(\n    componentClass: ComponentClass<any, any>\n): ComponentClass<any, any> {\n    const { prototype } = componentClass\n\n    if (componentClass[isMobXReactObserverSymbol]) {\n        const displayName = getDisplayName(componentClass)\n        throw new Error(\n            `The provided component class (${displayName}) has already been declared as an observer component.`\n        )\n    } else {\n        componentClass[isMobXReactObserverSymbol] = true\n    }\n\n    if (prototype.componentWillReact) {\n        throw new Error(\"The componentWillReact life-cycle event is no longer supported\")\n    }\n    if (componentClass[\"__proto__\"] !== PureComponent) {\n        if (!prototype.shouldComponentUpdate) {\n            prototype.shouldComponentUpdate = observerSCU\n        } else if (prototype.shouldComponentUpdate !== observerSCU) {\n            // n.b. unequal check, instead of existence check, as @observer might be on superclass as well\n            throw new Error(\n                \"It is not allowed to use shouldComponentUpdate in observer based components.\"\n            )\n        }\n    }\n\n    if (__DEV__) {\n        Object.defineProperties(prototype, observablePropDescriptors)\n    }\n\n    const originalRender = prototype.render\n    if (typeof originalRender !== \"function\") {","sourceCodeStart":52,"sourceCodeEnd":88,"githubUrl":"https://github.com/mobxjs/mobx/blob/01211a698b64ea94de8e5f276ff8235fcf8ddf96/packages/mobx-react/src/observerClass.ts#L52-L88","documentation":"The legacy `componentWillReact` lifecycle hook from old mobx-react versions is no longer supported. During `makeClassComponentObserver`, if `prototype.componentWillReact` is defined, mobx-react throws instead of silently ignoring the hook, alerting you that migration is required.","triggerScenarios":"Defining `componentWillReact()` on a class component and wrapping it with `observer`; upgrading an old mobx-react 5.x codebase (which supported componentWillReact) to mobx-react 6+ without removing the hook.","commonSituations":"Migrating legacy mobx-react 4/5 class components forward; tutorial code from older versions still defining componentWillReact.","solutions":["Delete the `componentWillReact` method — the observer's reaction handles re-rendering automatically without it.","Move any side-effect logic from componentWillReact into `componentDidUpdate` or a `reaction()`/`autorun()` created in `componentDidMount`.","Consult the mobx-react 6 migration guide to update other removed lifecycle behaviors."],"exampleFix":"// before\nclass Counter extends React.Component {\n  componentWillReact() { console.log('re-rendering') }\n  render() { return <div>{this.props.store.count}</div> }\n}\nexport default observer(Counter)\n\n// after\nclass Counter extends React.Component {\n  componentDidUpdate() { console.log('re-rendered') }\n  render() { return <div>{this.props.store.count}</div> }\n}\nexport default observer(Counter)","handlingStrategy":"validation","validationCode":"if (typeof MyClass.prototype.componentWillReact === 'function') {\n  throw new Error('Remove componentWillReact before applying observer (unsupported since mobx-react 6)')\n}","typeGuard":"const hasComponentWillReact = (c) => typeof c?.prototype?.componentWillReact === 'function'","tryCatchPattern":"try {\n  Observed = observer(MyClass)\n} catch (e) {\n  if (String(e.message).includes('componentWillReact')) {\n    delete MyClass.prototype.componentWillReact\n    Observed = observer(MyClass)\n  } else throw e\n}","preventionTips":["When migrating from mobx-react 4/5, grep the codebase for componentWillReact and remove it first.","Move hook logic to componentDidUpdate or explicit mobx reactions.","Enable lint rules flagging legacy React lifecycle names.","Follow the official mobx-react 6 migration checklist on upgrade."],"tags":["mobx-react","observer","class-component","lifecycle","deprecated-api","migration"],"backgroundTag":"removed-lifecycle-hook","analyzedSha":"01211a698b64ea94de8e5f276ff8235fcf8ddf96","analyzedAt":"2026-08-28T22:10:08.831Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}