I created a library that allows you to use Signals within React (and Next.js) safely: signals-react-safe

It allows rendering of signals directly in JSX, skipping re-renders of the component. If you need to use a signal’s value, it provides a new useSignalValue hook that re-renders the component whenever the signal’s value changes.

Live demo

@Xam-Mlr It’s just simplier, btw I’ve made way to use signals in next.js using hocs. @preact-signals/safe-react

import { useSignal } from '@preact-signals/safe-react'
import { withTrackSignals } from '@preact-signals/safe-react/manual'

export const Component = withTrackSignals(() => {
  const sig = useSignal(0)
  
  return (
    <div>
      <button onClick={() => sig.value++}>Add one</button>
      Count: {sig.value}
    </div>
  )
})

Next.js 14.0.1

the site can be used, but the signals do not work and cause an error in the consoles.

i think it’s not an issue in Next/React but in Preact Signals

https://github.com/facebook/react/issues/26704#issuecomment-1522044060

Facing the same issue. I wish i could use signal with nextjs. Any solution.?

I’ve implemented swc plugin for preact signals tracking in next.js. how to use Here you can try it out: https://codesandbox.io/p/github/XantreGodlike/preact-signals-nextjs/main

Any updates?

I use preact/signals-react(v^1.3.2) in next (v13.4.4), it work.

🙋 Same here! Running on: "next": "13.2.4"

https://github.com/preactjs/signals/issues/297

useSignalValue causes re-renders of the component. Same as if you access a signal’s value directly in a component. If you render the signal directly in the JSX (without .value), it won’t trigger a re-render of the component. Again, that’s how Signals normally works.

I understand that signals should not cause re-rendering. I speak for your library, which is meaningless in my opinion

the advantages of signals are that this is an innovation that was intended as a replacement for hooks. Which is 4 times more productive than them, and does not cause an extra re-render

No one seems to have commented about @satoshi-cyber 's fix.

I just tried it out and it works, but with the downside that signals cannot update their TextNode’s directly. The components need to re-render on value updates.

Interactive example on StackBlitz

1. Switch from @preact/signals-react to @preact/signals-core
2. Create a hook in your project that returns your signal’s state:

import { Signal, effect } from '@preact/signals-core';
import { useEffect, useState } from 'react';

export function useSignalState<T>(signal: Signal<T>) {
  const [state, setState] = useState<T>(signal.value);

  useEffect(() => {
    return effect(() => setState(signal.value));
  }, [signal]);

  return state;
}

1. In your components, read signal values using useSignalState, update values using the original signal:

import { signal } from '@preact/signals-core';
import { useSignalState } from '../hooks/signalState.ts';

const counter = signal(0);

function ClickCounter() {
  const counterState = useSignalState(counter);

  return (
    <div>
      <div>Counter: {counterState}</div>
      <button onClick={() => counter.value++}>Add One</button>
    </div>
  );
}

@XantreGodlike I meant you are right. React is unextensible. And it is written in that way. The actual problem is, that React has lots of legacy code because it is a very old library. They cannot remove and sometimes alter the old code as it will break many existing apps built with old React. Therefore they try not to touch the old code and do the new stuff on the old stuff as a layer. React source code looks freakingly horrible.

PReact on the other hand is written by correcting these mistakes.

Agree))

@XantreGodlike I meant you are right. React is unextensible. And it is written in that way. The actual problem is, that React has lots of legacy code because it is a very old library. They cannot remove and sometimes alter the old code as it will break many existing apps built with old React. Therefore they try not to touch the old code and do the new stuff on the old stuff as a layer. React source code looks freakingly horrible.

PReact on the other hand is written by correcting these mistakes.

Reproduction

1. Signals imported into component, but is has not 'use client' directive. If add directive, there is no error, but components is not reactive at all.
2. We can just import @preact/signals-react in any server side component

Minimal reproduction: https://github.com/XantreGodlike/preact-signals-next-issue

Error log:

 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ node_modules\.pnpm\@preact+signals-react@1.3.6_react@18.2.0\node_modules\@preact\signals-react\dist\signals.mjs (1:2855) @ eval
 ⨯ TypeError: Cannot set property createElement of [object Module] which has only a getter
    at __webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:79)
    at (rsc)/./src/app/page.tsx (D:\Projects\experiments\preact-signals-next-issue\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
null
 ⨯ node_modules\.pnpm\@preact+signals-react@1.3.6_react@18.2.0\node_modules\@preact\signals-react\dist\signals.mjs (1:2855) @ eval
 ⨯ TypeError: Cannot set property createElement of [object Module] which has only a getter
    at __webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:79)
    at (rsc)/./src/app/page.tsx (D:\Projects\experiments\preact-signals-next-issue\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "51753089"
null
 ⨯ node_modules\.pnpm\@preact+signals-react@1.3.6_react@18.2.0\node_modules\@preact\signals-react\dist\signals.mjs (1:2855) @ eval
 ⨯ TypeError: Cannot set property createElement of [object Module] which has only a getter
    at __webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:79)
    at (rsc)/./src/app/page.tsx (D:\Projects\experiments\preact-signals-next-issue\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
null
TypeError: Cannot set property createElement of [object Module] which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:204:58)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:211:6)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:212:2)
    at (rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs (D:\Projects\experiments\preact-signals-next-issue\.next\server\vendor-chunks\@preact+signals-react@1.3.6_react@18.2.0.js:20:1)
    at __webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:79)
    at (rsc)/./src/app/page.tsx (D:\Projects\experiments\preact-signals-next-issue\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7)
    at async eq (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401020)
    at async tr (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:404747)
    at async tn (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405297)
    at async tn (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405428)
    at async tu (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:409639)
    at async D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:410158 {
  digest: '331124788'
}
 ⨯ node_modules\.pnpm\@preact+signals-react@1.3.6_react@18.2.0\node_modules\@preact\signals-react\dist\signals.mjs (1:2855) @ eval
 ⨯ TypeError: Cannot set property createElement of [object Module] which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:204:58)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:211:6)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:212:2)
    at (rsc)/./node_modules/.pnpm/@preact+signals-react@1.3.6_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs (D:\Projects\experiments\preact-signals-next-issue\.next\server\vendor-chunks\@preact+signals-react@1.3.6_react@18.2.0.js:20:1)
    at __webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:79)
    at (rsc)/./src/app/page.tsx (D:\Projects\experiments\preact-signals-next-issue\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (D:\Projects\experiments\preact-signals-next-issue\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7)
    at async eq (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401020)
    at async tr (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:404747)
    at async tn (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405297)
    at async tn (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405428)
    at async tu (D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:409639)
    at async D:\Projects\experiments\preact-signals-next-issue\node_modules\.pnpm\next@14.0.2_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:410158 {
  digest: '331124788',
  page: '/'
}

Hypothesis

seems to be its related with webpack es modules building - it produces immutable object with getters, so preact signals react cannot patch createElement. But react@18.2.0 is still has commonjs imports/exports, probably next doing some stuff with react export on server side

useSignalValue causes re-renders of the component. Same as if you access a signal’s value directly in a component.

If you render the signal directly in the JSX (without .value), it won’t trigger a re-render of the component.

Again, that’s how Signals normally works.

On Mon, Nov 6, 2023 at 02:48 MrOxMasTer @.***> wrote:

https://codesandbox.io/s/signals-react-safe-demo-forked-xmm3sd?file=/src/Counter.tsx[image: image] https://github.com/vercel/next.js/assets/59291123/a3923db4-f759-436f-910c-703c36d56f77

• 2 re-render

[image: image] https://user-images.githubusercontent.com/59291123/280680015-d91c123c-3732-4b0a-a52c-316535280b6d.png

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/45054#issuecomment-1794544994, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJPPVBIXQNEQHPXJ4RORITYDC56LAVCNFSM6AAAAAAUARUWKGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJUGU2DIOJZGQ . You are receiving this because you commented.Message ID: <vercel/next. @.***>

I think we should fix signals react integration, because you cannot build an ecosystem with so much amount of runtimes. I see some benefits from using signals with this api, but I don’t think it’s generally a good idea, because there are not so many benefits against jotai

I don’t understand the meaning of this library at all, when instead of just using useState, you use 3 hooks (useSignal, useState, useEffect), you call even more re-render than it was, killing the signal chip (that they don’t have a re-render). Just without any wrapper, the person created hooks that have an efficiency of -100%. And if a global store is needed, the person did not somehow revive the signal function, but simply made hooks. Better zustand/jotai. He would at least read how preact implemented it on custom useSyncExternalStore and did something similar. Just made it worse than hooks. Just adding extra wrappers and an additional library in addition, which does not work.

It works efficiently. There is not good way to extend react because it’ve written unextendable

No one seems to have commented about @satoshi-cyber 's fix.

It’s kind of cool, but what is the rofl then to use signals? Download an extra library. If it was supposed to be a hook replacement, but at the same time we are writing a hook under the hood, which will also cause a billion-dollar re-render of the entire parent component and children.

Encountering the same issue unfortunately

We are in a similar situation now except that we aren’t using Preact signals but simply NextJS 13 with vanilla React, what’s weird is that neither yarn build && yarn start nor yarn dev gives the error, but the applications we are hosting on Kubernetes cluster within a container throws… anyone has an idea?