useffect is a escape hatch react team mentioned it clearly in docs it steps outside reacts sandbox react is meant for deterministic nature as state-ui projection engine so entire arc relays on ui =f(state)
within reacts sandbox eveything is fine predictable, batched, and synchronized by the fiber scheduler moment you write useffect it’s outside of sandbox so reacts itself saying it’s not reacts fault everything is manual in your hand memory cleanup and sync that’s what escape hatch meaning :)
idk why people make useffect as a meme
takes me time to read through and understand ( to an extent) all he's saying here so I just break the reply down in paragraphs and try reading on each.
takes vast level of experience to be this good at react ngl and that's where I aim for.
genius stuff
imo effect is great . but i feel using native react things are quite better for me this many sound weird all people hyped with effect i too love effect
but for remote data ingestion rsc’s + native promise streaming (use()) + suspense works for me and work for every kinda application
for state transmission (derived state ) never trigger a second render pass by updating state inside an effect when an existing prop or state shifts just compute the transformation inline on cpu during the initial render pass, optionally wrapping the calculation in useMemo to preserve structural references between execution frame
interactivity side effects localStorage writes, and API triggers directly inside your Event Handlers in the exact same V8 execution tick as your state mutations so it forces side-effects to be clean, atomic consequences of user actions, entirely eliminating reactive tracking loops so it look great
real time streams binding high-freq channels (WebSockets, Workers, SSE) straight to the framework scheduler using useSyncExternalStore (trust me it works ) it forces a synchronized memory handshake that eliminates data tearing and keeps your UI pinned to a locked so fucking great FPS rendering profile
go with direct dom manipulation just here drop standard post-paint checks for raw engine configurations (WebGL, Canvas, Observers)
use functional Callback Refs to grab the element pointer the exact microsecond the node hits the layout engine, running your initialization logic out-of-band before a single pixel is painted
react-fiber is greatest thing of all time idk people always think react it’s a templating thing lol it was never meant for being a template seen many tweets here they don’t understands how React leverages V8 exceptions to simulate algebraic effects, or how it batches to microtasks yielding to browser
this are thing would be replacement entirely rather then using effect it’s the choice of engineer at the end I want raw nature if the framework rather then using some great library which was loved by good good engg
browser view layer is inherently volatile and non-deterministic so effects feels over engineering for the problem we had at for view-layer
mutateAsync from TanStack Query exists for a reason, but I guess I found out about it much later, which means i would be refactoring this code later.
can already see how many fewer lines i would have had if I opted for mutateAsync
I learned a lot building this particular app
turns out I had to ditch the Vercel AI SDK because the backend was streaming responses as SSE.
I had to write a new api route to serve as middleware also because for some reason I was getting CORS errors when sending messages.
Nextjs server -> Render and cors is gone
The difference in a junior software developer and a senior can be observed from how they declare variables.
Junior: var arsenalUCL = 0
Senior: const arsenalUCL = 0
@mikedotwill@eldivine they have every right to banter you because you've not won a European trophy in your entire history. they have completed football before your eyes