The componentWillReact life-cycle event is no longer support

Error message

The componentWillReact life-cycle event is no longer supported

What it means

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.

Source

Thrown at packages/mobx-react/src/observerClass.ts:70

    })
}

export function makeClassComponentObserver(
    componentClass: ComponentClass<any, any>
): ComponentClass<any, any> {
    const { prototype } = componentClass

    if (componentClass[isMobXReactObserverSymbol]) {
        const displayName = getDisplayName(componentClass)
        throw new Error(
            `The provided component class (${displayName}) has already been declared as an observer component.`
        )
    } else {
        componentClass[isMobXReactObserverSymbol] = true
    }

    if (prototype.componentWillReact) {
        throw new Error("The componentWillReact life-cycle event is no longer supported")
    }
    if (componentClass["__proto__"] !== PureComponent) {
        if (!prototype.shouldComponentUpdate) {
            prototype.shouldComponentUpdate = observerSCU
        } else if (prototype.shouldComponentUpdate !== observerSCU) {
            // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
            throw new Error(
                "It is not allowed to use shouldComponentUpdate in observer based components."
            )
        }
    }

    if (__DEV__) {
        Object.defineProperties(prototype, observablePropDescriptors)
    }

    const originalRender = prototype.render
    if (typeof originalRender !== "function") {

View on GitHub (pinned to 01211a698b)

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.

Example fix

// before
class Counter extends React.Component {
  componentWillReact() { console.log('re-rendering') }
  render() { return <div>{this.props.store.count}</div> }
}
export default observer(Counter)

// after
class Counter extends React.Component {
  componentDidUpdate() { console.log('re-rendered') }
  render() { return <div>{this.props.store.count}</div> }
}
export default observer(Counter)

Defensive patterns

Strategy: validation

Validate before calling

if (typeof MyClass.prototype.componentWillReact === 'function') {
  throw new Error('Remove componentWillReact before applying observer (unsupported since mobx-react 6)')
}

Type guard

const hasComponentWillReact = (c) => typeof c?.prototype?.componentWillReact === 'function'

Try / catch

try {
  Observed = observer(MyClass)
} catch (e) {
  if (String(e.message).includes('componentWillReact')) {
    delete MyClass.prototype.componentWillReact
    Observed = observer(MyClass)
  } else throw e
}

Prevention

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.

When it happens

Trigger: 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.

Common situations: Migrating legacy mobx-react 4/5 class components forward; tutorial code from older versions still defining componentWillReact.

Related errors

AI-assisted analysis of mobxjs/mobx@01211a698b (2026-08-28). Data as JSON: /api/errors/b51bc3ca0f5bd2ca. Report an issue: GitHub.