preactjs / signals

Manage state with style in every framework
https://preactjs.com/blog/introducing-signals/
MIT License
3.62k stars 88 forks source link

Updating the signal does not cause component rerender #572

Closed Snowflake04 closed 2 weeks ago

Snowflake04 commented 2 weeks ago

Environment

Describe the bug This is how i have setup signal for testing in my project

import { signal } from "@preact/signals-react";
import { useSignals } from "@preact/signals-react/runtime";

const count = signal(0);

const RightContent = () => {
  return (
    <>
      <TopNav />
          <HomeIcon /> {count.value}
      <ListView />
      {/* <SplashPage /> */}
      <button onClick={() => (count.value++, console.log(count.value))}>click me</button>
    </>

i have also update the babel plugin as well

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["module:@preact/signals-react-transform"]],
      },
    }),
  ],
  resolve: {
...

Trying to update the value b clicking the button shows that the value is being updated ( when logged to console) but it does not rerenders the component

when subscribing using useSignals() it works without no issues.

I am using vite@5.2.11 react@18.3.1 @preact/signals-react@2.0.2 @preact/signals-react-transform@0.3.1

Expected behavior The UI should re-render without needing to subscribe using useSignals()

Snowflake04 commented 2 weeks ago

I am closing this issue since i found the fix myself. For anyone thats wondering. i was using @vitejs/plugin-react-swc as react plugin which uses SWC instead of Babel. changing it to @vitejs/plugin-react fixed my issue