Utilisation de signals afin de faciliter la manipulation du state

[ggrossetie]

Pour référence, voici les erreurs que j'obtiens quand j'importe import { useSignal } from '@preact/signals-react' et que je change de page:

Warning: React has detected a change in the order of Hooks called by Articles. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Articles (at src/index.jsx:135)
    in Route2 (at PrivateRoute.jsx:12)
    in PrivateRoute (at src/index.jsx:134)
    in Switch2 (at src/index.jsx:129)
    in Suspense (at App.jsx:11)
    in main (at App.jsx:10)
    in StyloApp (at src/index.jsx:128)
    in Router2 (created by BrowserRouter2)
    in BrowserRouter2 (at src/index.jsx:125)
    in Provider (at src/index.jsx:124)
    in StrictMode (at src/index.jsx:123)
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnOnHookMismatchInDev @ react-dom.development.js:14715
updateHookTypesDev @ react-dom.development.js:14674
useRef @ react-dom.development.js:15939
(anonymous) @ index.ts:111
set @ index.ts:120
renderWithHooks @ react-dom.development.js:14790
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushSync @ react-dom.development.js:21932
scheduleRefresh @ react-dom.development.js:11626
renderer.scheduleRefresh @ react_devtools_backend.js:5229
(anonymous) @ @react-refresh:267
performReactRefresh @ @react-refresh:256
setTimeout (async)
(anonymous) @ @react-refresh:666
(anonymous) @ Articles.jsx?t=1681490609805:98
setTimeout (async)
(anonymous) @ Articles.jsx?t=1681490609805:96
(anonymous) @ client.ts:524
(anonymous) @ client.ts:441
(anonymous) @ client.ts:307
queueUpdate @ client.ts:307
await in queueUpdate (async)
(anonymous) @ client.ts:160
handleMessage @ client.ts:158
(anonymous) @ client.ts:91

react_devtools_backend.js:2655 The above error occurred in the <Articles> component:
    in Articles (at src/index.jsx:135)
    in Route2 (at PrivateRoute.jsx:12)
    in PrivateRoute (at src/index.jsx:134)
    in Switch2 (at src/index.jsx:129)
    in Suspense (at App.jsx:11)
    in main (at App.jsx:10)
    in StyloApp (at src/index.jsx:128)
    in Router2 (created by BrowserRouter2)
    in BrowserRouter2 (at src/index.jsx:125)
    in Provider (at src/index.jsx:124)
    in StrictMode (at src/index.jsx:123)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:2655
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback2 @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushSync @ react-dom.development.js:21932
scheduleRefresh @ react-dom.development.js:11626
renderer.scheduleRefresh @ react_devtools_backend.js:5229
(anonymous) @ @react-refresh:267
performReactRefresh @ @react-refresh:256
setTimeout (async)
(anonymous) @ @react-refresh:666
(anonymous) @ Articles.jsx?t=1681490609805:98
setTimeout (async)
(anonymous) @ Articles.jsx?t=1681490609805:96
(anonymous) @ client.ts:524
(anonymous) @ client.ts:441
(anonymous) @ client.ts:307
queueUpdate @ client.ts:307
await in queueUpdate (async)
(anonymous) @ client.ts:160
handleMessage @ client.ts:158
(anonymous) @ client.ts:91

@react-refresh:278 Uncaught TypeError: getSnapshot is not a function
    at useSyncExternalStore (use-sync-external-store-shim.development.js:115:15)
    at index.ts:117:2
    at Object.set [as current] (index.ts:120:2)
    at renderWithHooks (react-dom.development.js:14790:30)
    at updateFunctionComponent (react-dom.development.js:17034:20)
    at beginWork (react-dom.development.js:18610:16)
    at beginWork$1 (react-dom.development.js:23179:14)
    at performUnitOfWork (react-dom.development.js:22154:12)
    at workLoopSync (react-dom.development.js:22130:22)
    at performSyncWorkOnRoot (react-dom.development.js:21756:9)

[ggrossetie]

Apparemment cela se produit dès que j'introduis import { useSignal } from '@preact/signals-react' quelque soit le niveau dans l'arborescence des composants.

J'ai tenté une mise à jour sur les dernières versions de React, Redux et React Router mais j'ai toujours la même erreur 😞

Je vais essayer de reproduire sur une application React basique afin d'ouvrir une issue (ou non) sur https://github.com/preactjs/signals

[ggrossetie]

A noter que le soucis se reproduit en mode production:

react-dom.production.min.js:123 Uncaught TypeError: b3 is not a function
    at q (use-sync-external-store-shim.production.min.js:10:235)
    at index.ts:117:2
    at Object.set [as current] (index.ts:120:2)
    at Ch (react-dom.production.min.js:157:88)
    at li (react-dom.production.min.js:180:154)
    at ck (react-dom.production.min.js:269:343)
    at bk (react-dom.production.min.js:250:347)
    at ak (react-dom.production.min.js:250:278)
    at Tj (react-dom.production.min.js:250:138)
    at Lj (react-dom.production.min.js:243:163)

[ggrossetie]

Je soupçonne redux (et son Provider) d'être en conflit avec Signals. Je vais essayer de remplacer redux par un state Signals pour voir si l'erreur disparaît.

[ggrossetie]

Effectivement, en replaçant Redux par signals avec un state global: https://preactjs.com/guide/v10/signals/#managing-global-app-state cela fonctionne mais ça fait beaucoup de changements. Je vais décorréler l'évolution sur les espaces de travail de la mise en place de Signals pour éviter d'y passer trop de temps et de faire trop de changements.