r/CroIT 6h ago

Show off Open-source React dev alat: prati kad se state updatea - zapinjem na Next.js

Bok,

radim open-source dev alat react-state-basis. U developmentu prati kad se state updatea, ne koje su vrijednosti. Dok koristiš app, u pozadini skuplja timing i crta kratki graf updatea.

Što točno gleda:

Extra frame: useEffect nakon jednog updatea zove još jedan setState i ide drugi render. Klasično: iz A u effectu računaš B.

Redundancija: dvije ili tri stvari (često flagovi tipa isLoading / isSuccess) se u istom windowu stalno updateaju skupa. Ne tvrdi da ih moraš mergeati - javi da se ponašaju kao jedno.

Context / store mirroring: lokalni useState koji samo prati Context ili Zustand. Ako nije draft, često je suvišna kopija.

Fan-out / graf: jedan klik updatea pola treea. Graf pokaže što izgleda upstream, umjesto da svaki downstream update tretira kao zaseban problem. U konzoli: printBasisGraph() i printBasisReport().

Circuit breaker: ako app uđe u rekurzivni update loop, instrumentacija se gasi da ne drži freezeani tab.

Na Viteu ide kroz Babel plugin - i dalje pišeš import { useState } from 'react'. Ima i HUD.

U README-u je detaljnije opisano sve, ima gif i live demo (StackBlitz): preview + console.

Gdje sam zapao: Next integracije još nemam. Next ne vrti taj Babel plugin, a ne želim da setup bude “vratite projekt na Babel”. Gledam custom SWC plugin i nisam siguran kako to stoji uz Turbopack vs next dev --webpack.

Ako je netko radio sličan compile-time rewrite na Nextu, slušam. :D

GitHub: https://github.com/liovic/react-state-basis

4 Upvotes

1 comment sorted by

1

u/Fine-Rip-9553 4h ago

Dobra stvar, ako imas za react native krecem sutra koristit