7 ms·
I'd like to add improper use of useEffect to this list. useEffect is an escape hatch but I often see devs using it as some kind of ad-hoc event driven system ap
by localghost3000 4y ago
I'd like to add improper use of useEffect to this list. useEffect is an escape hatch but I often see devs using it as some kind of ad-hoc event driven system approach. useEffect divorces the outcome of an action from its invocation which is problematic. It can lead to some tricky state management scenarios really quickly.
And as a side note: can we *please* stop shitting on every React post that appears on HN? All this hater energy is really starting to be a drag.
- 3np 4y agoThe last "solution" even commits this mistake. Blind leading the blind.
- phailhaus 4y agoI would say useEffect is not an escape hatch, it's a fundamental building block of the hooks paradigm. You need some way to run impure side effects after your component has been rendered, and `useEffect` is how you register those effects. The most basic example is making an external request based on props: can't do that in the render loop because it has to be pure, since React may run it multiple times before committing to the DOM. `useEffect` is the only way you can get a guarantee that it will only be run once after rendering, and only when its dependencies change.
- paulddraper 4y agoRight. It's how mutations are done. But there is a lot of mutable code that could be immutable, and `useEffect` is how that happens in React.
- phailhaus 4y agoSorry, what do you mean by mutable vs immutable code? I don't think it necessarily has to do with mutability, because you can "mutate state" in regular callbacks without useEffect. The only way to get true mutability in React is via refs, all other state is immutable.
- paulddraper 4y agoI mean pure vs impure. > you can "mutate state" in regular callbacks without useEffect Yes, via `useState`. That too gets overused. (Note: useEffect and useState are 100% necessary, but also easily overused.) useEffect for when you want to manipulate state outside the component. I.e. change the document title, exchange data with an HTTP server, store data in localStorage.
- bayesian_horse 4y agoAlso: even with hooks, the component is still a pure function in a less low-level kind of way. The hooks yield effect descriptions, to be carried out later, on a side channel. So the component is still a pure map of the inputs to the outputs, just that the outputs are not just comprised of the javascript function's return value, but also the effects on the side channel.
- dgb23 4y agoThat’s not pure anymore for any practical definition. When you get different answers for the same question, then you’re not calling a function. When you can only get the same result by recreating the same internal state through external manipulation, you’re dealing with side effectful, imperative code. Hooks are ergonomic and easy to reason about and that’s great. But they turn functions into objects.
- ojkelly 4y agoWhat you’re missing here is that the hooks form part of the input to the hook/render function. There’s a reason they can’t be conditional (though with a compiler theoretically they could be). The whole idea of the useState hook, is that it’s _not_ internal state to the hook. That state isn’t stored on the stack of the hook function, but against the component.
- dgb23 4y agoI understand that, but your component is now an object that can be mutated via events and it tracks internal state via calls to useState. You cannot call the component with the same arguments getting the same results anymore AKA it’s not pure. You indirectly mutate it via event handlers, which are effectively methods.
- vlunkr 4y agoThis is definitely true, but I also think it's overused in typical UI components. I often see patterns where some user event triggers a state change, which triggers a useEffect hook. In most cases, you could instead have your event handler directly trigger your side-effect code. Adding useEffect into the mix is a huge point of failure because, well, it sucks. Until you get that chain of deps just right it's not going to run when you think it is, or it's going to run with some stale values.
- localghost3000 4y ago> I would say useEffect is not an escape hatch, it's a fundamental building block of the hooks paradigm The react docs literally call it an escape hatch [0]. First sentence. [0]https://beta.reactjs.org/learn/you-might-not-need-an-effect https://beta.reactjs.org/learn/you-might-not-need-an-effect
- ojkelly 4y agoYep, and escape hatch is actually a great descriptor. useEffect let’s you safely communicate with the world outside react (ie cause side effects). It’s the only reliable way to …escape.
- phailhaus 4y agoThat's funny, they're such a necessary tool for making anything more than simple UI's that I wouldn't consider that an escape hatch. Kind of like saying that screwdrivers are an "escape hatch" for hammers.
- rhaway84773 4y agoThese are the new Beta docs. The original docs made no such claim. Which brings us back to the biggest problem with useEffect. Even the react devs don’t seem to have a clue how it should actually used, until only recently, despite it being among the 2 most used hooks ever since hooks were introduced.
- localghost3000 4y agoWhat about any of that invalidates my assertion that useEffect is not the tool to reach for most of the time? The original docs are outdated The abstraction itself is ripe for misuse Tons of devs use it when they shouldn’t. Insert shrug emoji here.
- lozenge 4y agoTo make it concrete, I think they're saying, if state "rows" depends on state "filter" and "sortOrder", people write `useEffect(() =>setRows(...), [filter, sortOrder])`. Ie writing reactive code but relying on the React render loop to trigger reactions. The problem is that you can no longer step through your code in full and as you say, your code now mandates flushes to the DOM that are unnecessary (mid computation). It's better to setRows at explicit places or learn and use a library like rxjs if you really need to encapsulate that complexity.
- kkirsche 4y agohttps://beta.reactjs.org/learn/you-might-not-need-an-effect https://beta.reactjs.org/learn/you-might-not-need-an-effect The beta react docs have a number of great examples of this!
- hyperhello 4y agoI’m not against React but it sure seems like it’s more complicated than vanilla JS. The hater energy might be a clue knocking at the door, trying to quietly inform you of something you don’t want to hear.
- MatthiasPortzel 4y agoThe people who work professionally with react all day are well aware of React’s problems. But I’m a front end developer. I’m not about to change careers and become a database administrator because managing state in React is unintuitive. (And while there are other frontend frameworks and solutions, they have their own problems, and it’s more difficult to find a job using them.)
- phailhaus 4y agoLol "quietly". React has been around for over ten years with one of the largest grassroots ecosystems built around it. Maybe that should be a clue that it has something to offer? I think HN is averse to it because it's blamed for "how complicated the web has become". If only we would all settle for simple static websites!
- hyperhello 4y agoIt’s not binary. There can be reasons to use it and reasons not to.
- blowski 4y agoMaybe, but it’s more likely to be boring noise from immature script kiddies who only want to use the newest tech because it’s cool.
- robertoandred 4y agoI’m not against indoor plumbing but it sure seems like it’s more complicated than a shallow hole dug in the ground.
- wetpaws 4y agoUsing functional components would be a mistake in general.
- paulryanrogers 4y agoWhy? Do class based components avoid some downsides?
- azangru 4y agoCalling useEffect an escape hatch is as much of a recent fad as shitting on react. How can it be an escape hatch, when it is the only api provided by react to perform side effects during the rendering cycle, which do not themselves pertain to rendering? Calling it an escape hatch is the same as calling componentDidMount or componentDidUpdate methods of the class-based api escape hatches.
- localghost3000 4y agoI mean the react docs literally call it an escape hatch[0]. First sentence. [0]https://beta.reactjs.org/learn/you-might-not-need-an-effect https://beta.reactjs.org/learn/you-might-not-need-an-effect
- dgb23 4y agoThat’s bad wording though. A fundamental building block shouldn’t be called an escape hatch.
- localghost3000 4y agoAh yes. It’s the docs that are wrong.
- dgb23 4y agoI understand why it’s worded that way in this specific article. But it’s still unfortunate to call it an escape hatch. This term is typically used for ways of breaking the rules of a framework. With useEffect you’re still very much in React world and need to follow the rules to achieve much of anything with it. The norm would be not to use an escape hatch. But I doubt there are many React applications that aren’t using useEffect.
- ojkelly 4y agoIn useEffect your code runs at a specific point, where it’s safe to bridge react to the outside world. It’s not about breaking the rules, as much as you have the ability to cause and react to side effects (eg a fetch promise) and inform react about the result (with a setState).
- listenallyall 4y ago> And as a side note: can we please stop shitting on every React post that appears on HN? All this hater energy is really starting to be a drag. Kind of ironic when this post kicked off a long argumentative thread shining a light on the exact things people don't like about React... "escape hatch", "impure side effects", "useEffect... huge point of failure... it sucks", arguments whether hooks and refs are immutable or not... and these comments are coming from people who claim to like React!
- localghost3000 4y agoI know. A bunch of dudes talking out their ass about me calling useEffect an escape hatch when it’s literally called that IN THE DOCS. HN never disappoints.
- diordiderot 4y agoI don't have a dog in this fight but I think that people here don't care so much about what is said, more about what is shown. E.g. an outspokenly pro-climate politician who passed the 'frack through orphanages with baby seals bill' will not be taken seriously because actions don't match reality. IIRC useEffect was not originally called an escape hatch and that terminology was pegged on once they realised that a fundamental hook was actually a 30mm footgun. To make it worse they haven't provided a clear way to deal with the problem instead relying on 3rd party packages
- localghost3000 4y agoYou’re conflating clarifying intent with outright deception. The react team is trying to clarify how useEffect is intended to be used because it’s so frequently misused. The fact that it’s a possibly a poorly designed abstraction that is ripe for misuse is not really relevant to the discussion imo. Don’t take my word for it though. Dan Abramov himself has said pretty much what I’m saying (you’d have to find it on Twitter). Ken C Dodds shared a talk (not run by him) called “Goodbye UseEffect”. Look this stuff up if you haven’t. It’s out there. There are often better ways than useEffect. And when those don’t work you can always use the esc… well you get the idea. EDIT: spelling
- crispinb 4y ago> can we please stop shitting on .. [disfavoured tech of the month/year/decade] cf. "can be please stop hyping .. [favoured tech of the month/year/decade]" Talk about pissing into the wind.
- Existenceblinks 4y agoI think our industry should accept that React sucks in every engineering metric. And then we move on and no one is going to complain about it.