Skip to content

Bug: MobX-like observer pattern doesn't work with Fast Refresh because Hooks don't get detected #20417

@Bnaya

Description

@Bnaya

React version: 17.0.0

Steps To Reproduce

  1. https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js
  2. Delete one of the hooks there

Link to code example:
https://codesandbox.io/s/react-refresh-webpack-plugin-rendered-more-hooks-than-during-the-previous-render-issue-ezcrz?file=/src/Comp.js

The current behavior

You get "Rendered more hooks than during the previous render" error

The expected behavior

Should hot reload and re-mount the component.

The source of the issue have two parts:

  1. react-refresh and the bundler fails to inject signature to the component
  2. When no signature apparent, react-refresh consider the components as compatible, which is not always true, as in the repro https://github.com/facebook/react/blob/9aca239f11f31109dc1a229aa1571c2bf02f5524/packages/react-refresh/src/ReactFreshRuntime.js#L126-L132

I've filed an issue also for the webpack plugin: pmmmwh/react-refresh-webpack-plugin#266
Mobx related issue: mobxjs/mobx#2668

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions