Hacker News Reader

Comment by andix | Hacker News Reader

And that's why using effects for such tasks is a huge anti pattern.

https://react.dev/learn/you-might-not-need-an-effect

The problem is you literally need to use effects to make api requests or access browser apis. You can't get away from it. Maybe you can try and tame the complexity by centralizing this logic as a small team but if the team gets big enough it's fruitless.

You're right, but I haven't touched a React project in ages that wasn't using a fetch library of some kind that give you hooks.

Cause you're inevitably gonna want to track loading state, error state, refetch on error, revalidate etc etc.

swr or tanstack-query are great and remove the need for useEffects for API requests. For sure they come with their own overhead, but there isn't getting away from the complexity of handling API requests and all the possible paths that can happen.

Isn't useSyncExternalStore the recommended hook for API requests? And for making API requests I think most people recommend using a library. React-query, RTK or swr for example.

For accessing browser apis useEffects are the way to go, but those are usually extremely easy to understand in my experience. Or just use a library that provides the needed functionality.

Per the blog post announcing it, it's not recommended that you use that hook directly, only in libraries:

> useSyncExternalStore is intended to be used by libraries, not application code.

https://react.dev/blog/2022/03/29/react-v18#usesyncexternals...

I know. So either use an existing library or build your own. But don't useEffect instead.

Yeah, just noting that link for context (I don’t think it’s documented on the hook’s own page?)

> The problem is you literally need to use effects to make api requests

No. Wtf? Don't do that. Never do that. Effects are for legacy DOM manipulation (and ad-hoc use of browser apis). Pretty much nothing else. Who tampers with states and data in useEffect is hellbent on creating spaghetti.

I assume your suggestion here is just to embrace a framework for data fetching and try not to think too hard about how they in turn implement it?

Can't really fault developers for falling into this useEffect trap when even the official docs show that data fetching is indeed handled via useEffect[1], while at the same trying to yell at the reader to "NOT TRY THIS AT HOME" and just go use a framework because it's such a complex problem... which naturally just creates more questions than answers for the poor developer trying to understand how it all works.

[1] https://react.dev/learn/you-might-not-need-an-effect#fetchin...

Uhh... That's terrible piece of docs. They don't even cancel stale fetches, just ignore the recieved responses. They don't debounce anything.

There are so many things about syncing data between the client and the server that this section of the docs should just say "Don't", use Apollo or Redux or whetever. React is UI library, for data you need data library or at least general state handling library. Quick and dirty will bite you tenfold.

Reply on news.ycombinator.com