Skip to content

Including @preact/signals-react-transform breaks rerender on hook change for fast refresh #626

Closed
@Artur-

Description

@Artur-
  • Check if updating to the latest version resolves the issue

Environment

  • I am using @preact/signals-core
  • I am using @preact/signals
  • I am using @preact/signals-react

Describe the bug
React Fast Refresh has two modes of updating the view:

  1. updating the current component tree
  2. re-rendering the components from scratch

Most operations result in updating the current component tree but some operations, like adding or removing hooks, causes everything to be re-rendered and state to be lost. This is mandatory as trying to call a different number of hooks during rendering will cause React to fail with Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. or Error: Should have a queue. This is likely a bug in React. Please file an issue. or something similar

When adding @preact/signals-react-transform, it seems like all operations result in trying to update to current component tree and thus modifying anything related to hooks shows one of the mentioned errors.

To Reproduce
https://github.com/Artur-/react-signals-hmr

Steps to reproduce the behavior:

  1. npm run dev
  2. Open localhost:5173
  3. Click the counter a few times to change the state
  4. Edit src/App.tsx and add a new useState hook

The main branch includes @preact/signals-react-transform and shows the problem
The without-signals branch shows how it is supposed to work

Expected behavior
The page should be updated and the counter reset to 0.
Instead, the page is empty and console contains the React error messages

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions