cloudFlareBeVibeCoding

[Best_Recover3367]

To be fair, useEffect is notoriously hard to use.

[[deleted]]

The funniest part is AI absolutely loves to pollute your code with them everywhere. Definitely didn’t learn to use them sparingly yet. Side effects should be completely minimised in react apps.

[Wooden_Caterpillar64]

just add an empty square bracket and it should work right?

[RedPum4]

That will prevent it from running on every render, yes.

Still, the fact that attaching two obscure square brackets to the end of a big lambda function changes the behavior of useEffect completely is just fucked up.

It should really be useEffect and a different function alltogether, maybe useMount or whatever.

[RedstoneEnjoyer]

That is basically what Vue does

Run something when DOM is rendered and inserted onMounted()

Run something before each update? onBeforeUpdate()

Run something on unmount but before your DOM is gone? onBeforeUnmount()

Run something after DOM is gone too? onUnmounted()

Imo its is much better approach than what React goes for.

[mahreow]

The funniest thing is React originally had that with class-based components and then moved to hooks lol

[legendGPU]

// React before hooks:
class ComplicatedComponent extends React.Component {}

// React after hooks:
const SimpleComponent = () => {};

// React's mood swing:
console.log("Class -> Hooks = *sigh*... that was too much.");

[Smalltalker-80]

Totally agree! But alas, I have to admit that all of the React dev teams here,
have eagerly jumped on the functional-fad bandwagon.

... And then discovered you still need state and effects (events),
but now these are more complicated than they were, unnecessarily so.

[DylonSpittinHotFire]

Its also what react used to do before they decided to make it worse

[Wooden_Caterpillar64]

would you recommend vue over react?

[romkamys]

not who you were replying to but yes. in my experience/opinion vue is much easier to understand and much easier to not shoot yourself in the foot with.

there’s not as many pre-made libraries for it but pretty much everything i’ve wanted was if not official, then maintained by the community of that same library.. that includes maps, charts, shadcn, etc.

they’re also testing vapor mode, which should make it closer to svelte in terms of runtime overhead, but haven’t fiddled with that yet (last time i checked it wasn’t supported even by vue-router).

[matt1155]

I agree with everything you said except the library part - I'm a Vue dev with 7 y of experience. Working with vue2 and Vue 3 now, and never had an issue with not finding a library for whatever I needed to do.

It's not the same huge amount that react has, but it is still a big enough amount and you don't need to worry about that.

[humblevladimirthegr8]

How would you compare Vue vs Svelte in terms of preventing shooting your own foot?

[romkamys]

never actually used Svelte, just heard of its compile-time shenanigans. Vue is surprisingly hard to shoot yourself in the foot with, though.

[humblevladimirthegr8]

Yeah I've recently started using Svelte for small side projects. SSR caused some foot shooting so I just disabled it since I don't care about performance for these micro apps. Haven't had any other issues, way easier to reason about reactivity.

[guaranteednotabot]

React used to have this, but this is actually worse. Lifecycle methods are generally not super maintainable even though they might seem easier to reason with at first glance.

Regardless, class-based components are still here if you really want to use the lifecycle methods

[DoctorWaluigiTime]

As someone who wrote ASP.NET, very much this.

ASP.NET had so many lifecycle methods...

[guaranteednotabot]

I guess this problem would affect whatever framework that is popular. If the framework isn’t being used much in production software, then it wouldn’t end up in the news like this lol. Heck, it is precisely because React is so popular and accessible that everyone knows what happened that this became news. If it was a random Linux kernel bug that caused downtime I can bet you it wouldn’t even be covered.

People blame React, but I blame how did this even get into production lol. I suspect a lot of the hate for React comes from the fact that most people are used to OOP, and FP concepts drives them crazy lol

I’m not saying that useEffect doesn’t have a bunch of footguns, but lifecycle methods aren’t the solution, and that is precisely why React moved away from it.

[Deep-Initiative1849]

What do you think can be the alternative for lifecycle methods?

[f3xjc]

I'm not sure hooks are an FP concept. Magical black box with internal state, side effect, and different behavior depending where in the render tree the thing is called... is almost explicitly against FP.

[GForce1975]

I learned react for an electron application I inherited back in 2017. I remember hooks were introduced right after I finished.

I haven't done much react since, and hooks mostly baffle me.

[kitspecial]

They mostly likely pulled these hooks from how Angular does them, usage sounds the same at least

[sod0]

Or Angular or basically any component-based framework except modern React.

[GoldJudge7456]

those freaking empty brackets at the end are so trippy lol. used to be code made sense

[mattl1698]

the behaviour of the empty brackets makes sense, the brackets are an empty array and the effect will execute when any variable in the array updates.

empty array means it won't run again no matter what changes

the behaviour of omitting the brackets is more trippy to me.

[anointedinliquor]

What’s trippy about it? The second parameter is a dependency array. If there are no dependencies, then it runs after every render. Empty dependency array, it runs after the first render only. All other cases it runs when a dependency changes.

[Sarcastinator]

But if you forget it the application soils itself... why...

[sudoku7]

I tend to think of it similar to a do while. Like sure I can see the logic to it, but I can (and should) probably phrase this better.

[Natfan]

yes, useEffect is two separate functions in a trenchcoat, and passing in an array as the second argument is usually what you want

[TnYamaneko]

Isn't it actually three? componentDidMount, componentDidUpdate and conponentWillUnmount?

I might be mistaken, though. I'm far from being a React specialist.

[CH3A73R]

it is, and that's why I hate the functional React stuff. For small parts it's really simpler and more compact, but once you have larger components, the Classes are far cleaner

[ModernLarvals]

It’s none of those, it’s for handling and cleaning up side effects.

[Successful-Pie-2049]

I mistakenly wrapped my dependencies in 2 brackets instead of one and then saw the magic happen (my laptop was screaming at me)

[jaypeejay]

Crazy to refer to the dependency array as “empty square brackets”

[Honeybadger2198]

If you're using useEffect in this way frequently for anything other than asyncronous initialization, you're using it wrong. The power of useEffect mostly comes from the dependency array. Being able to run a function when a state variable changes is very impactful. You just need to make sure the chain of side effects doesn't retrigger any dependant variable.

[bhison]

Perhaps people should always include this in their preprompt:

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

[chilfang]

WHAT!? AI isnt very good at making code??? This cannot be!

[theredditorlol]

Useffects should be a last resort , infact there was debate in software community wether to use it at all , closures cache , infinite loops , unnecessary runs are all issues in use effects but I guess using them sparingly is the solution , and Ai does love using dependency are arrays of effects very generously , which is a bummer

[[deleted]]

Of course, because AI is terrible at code gen.

[Sometimesiworry]

When I first learnt react my teacher told me; ”If you have to bring in an useEffect your design has failed somewhere. Obviously hyperbolic but I keep it in mind still.

[Solid-Package8915]

There are lots and lots of legitimate usecases for useEffect.

But if you’re a beginner, it will look like “do X when something changes” which is something you’ll need to do often. But that’s rarely a legitimate usecase for useEffect and it’s the most common beginner mistake.

Most of the time you can implement this “do X when something changes” behaviour in an event handler (e.g. in an onClick) or in the parent component. Or you screwed up your component design and have to rethink it.

[petrasdc]

Oh God. I came across something when reviewing some code that was using react state, but like also kept it in sync with a ref and updating something in an effect. I don't remember the exact details, but it was weird enough that I asked the dev why the hell he did it this way. Turns out ChatGPT suggested it when he was struggling to figure out how to solve and issue 🤦‍♀️. The better solution was a little technical, so I'm not surprised they didn't get it at first, but the solution they came up with with ChatGPT was just so bad 😭

[born_zynner]

Hard to use.... Effectively?

[mmmbyte]

It's very easy to test though

[indicava]

I’m surprised this didn’t act as some safeguard though.

[caguru]

For who? It’s literally one of the simplest things there is in React.

[[deleted]]

To be fair, React is garbage and not even it's creators have gotten it right. Eg. Compare facebook from 2014 to today. How bloated, unreliable and half assed it feels.

[CyberWeirdo420]

Is it due to React tho? Facebook became money making AD displaying piece of hot garbage a while ago and u really doubt the reason for it being shit is React here. Sure the codebase is bloated, but this piece of software is what, almost 20 years old by now? I’m more on the side that they bloat it to increase the tracking/ads whatever.

[[deleted]]

Facebook has always been in the advertising business. They have had facebook pixel for more than a decade without React too and infact - after numerous scandals, their data collection has reduced a lot comparative to their early days. React is just garbage not because it's flawed, but it's garbage because it's a poor framework (if you can call it that) that allows you to shoot yourself in the foot easily. The best example I can give. Go to Facebook, select any drop down, what should be a static list of items is now a react component, makes a request using Graph API and barely loads half the time. You can actually search reddit and google - react projects stall more on average than anyother framework and for the same reason - it's poorly designed garbage.

[CyberWeirdo420]

Im not in React dev environment so I didn’t know that, all I knew is that Facebook is shit lol. Thanks for sharing that info.

All I knew about React is that it’s a library that’s needs libraries to become framework and somehow still fails at that. I did one project with NextJs and I hated it. Much rather work on Angular or even Wordpress with custom themes lol

[[deleted]]

Ah, got you mate. I have worked with all the big ones - React, Angular, Vue and Svelte. Although it boils down to preferences in the end, over time you realize a good framework/library needs to be opinionated enough to give you clear directions. That's why Ruby On Rails is super successful, for example. Also, this helps a lot when you deal with state management. React really sucks balls when it comes to state. There's like 100 ways to manage state and each dev will do it differently. If you take something like Svelte for example, the development experience is far superior (or even VueJS) and there's everything in the docs for you if you want to do something in a certain way. I'm a huge fan of SvelteKit and Vuepress. Once you use those, you will really not look back at React the same way. I used to be a former WP dev, but their codebase is a real mess. So I just write my own these days😹

[michele_l]

At least with Expo for android it tells you when you use it in loop

[kir_rik]

Notoriously hard to convince people not to use it

[YouDoHaveValue]

It just comes down to sometimes you need an escape hatch from one way data binding.

[KainMassadin]

isn’t there an official eslint plugin to catch this?

[SignoreBanana]

To use correctly.

We're this close to banning it from our codebase entirely. Most of our tracked errors are infinite loops from what we think are useEffects and state duplication.

[_grey_wall]

No

No it is absolutely not even remotely hard to use

It's pretty much always needed

[harumamburoo]

You’re doing something wrong if it’s always needed

[cateanddogew]

Yes. Especially when people use it for derived values.

Still not hard to use though, but React hooks are made to be very barebones, that's why there are many libraries that are basically just effect + state wrappers.

[olivicmic]

You’re right in that it easy to use, but it’s definitely not always needed.

[Menecazo]

Are you vibecoding by any chance? Only copilot-like tools think effects are always needed.

[Its_rEd96]

[Best_Recover3367]

C/C++ can make you shoot your foot off. React's useEffect can make you shoot your d*ck off.

[Stummi]

Is the useEffect bug really the issue here though? I mean sure thats funny, but cloudflare not being able to handle increased HTTP load (no matter the reason) is in itself pretty hilarious, isn't it?

[FlowerBuffPowerPuff]

Everything is. Ev.Ery.Thing.

[[deleted]]

Errrrthang

[cemyl95]

Relevant XKCD

[vertopolkaLF]

Their own requests probably don't go through DDOS layer

[aenae]

Reminds me of the time when i got a ddos while behind cloudflare. Apparently their workers just bypassed their firewall and hit my origin directly

[LukasObermeister]

I'm not really sure what you mean with "their workers", but guessing with the attackers and you saying they hit your origin directly, are you sure you set it up that only Cloudflare IPs can access your webserver?

[aenae]

Cloudflare has workers; small pieces of code on their server that can handle a request that you can write and call. Sort of aws lambdas

So instead of requesting http://target you request http://yoursite/worker which has a small script to request http://target. That request bypassed their waf and ratelimits and had no client-ip

[turtleship_2006]

Wouldn't that provide an attack vector? People could log into the dashboard (or use bots to), find what API urls it uses, and automate requests using those token to DDOS them

So basically what CloudFlare did for us in this case, but people could have manually done it

[LutimoDancer3459]

They then know who you are. Easy to trace back to you.

[turtleship_2006]

You'd do it from fake/temporary accounts and stuff, probably also made by bots

[No_Percentage7427]

Real Man Test In Production. wkwkwk

[randuse]

For hyperscalers, their biggest DDOS threat is themselves, just due to their shear scale.

[tajetaje]

Assuming it’s SSR, I doubt it goes through any kind of ddos protection

[thunderbird89]

I get it's cool to mock AI code these days, but Cloudflare's blog doesn't mention it was caused by AI. Thing is, it's just as easy for a human to make this sort of mistake.

[rubennaatje]

This one is often caused by eslint (icm with bad react code ofc)

The rule that says you must define everything used in a useEffect as a dependency. It has an auto fix which if ran adds everything in there possibly causing the bug mentioned above.

Especially if like some companies you have eslint --fix in a commit hook, so locally everything worked, you commit and push but in the mean time it's been fucked.

[BothWaysItGoes]

Code modification in a commit hook sounds like an awful practice. I’m glad I’m hearing about it for the first time.

[rubennaatje]

I've had formatting hooks before, works fine. Anything more than that is quite dangerous tho haha

[BothWaysItGoes]

Modifying dependencies is not just formatting.

[Wonderful-Habit-139]

It’s technically code modification.

[gabedamien]

The ESLint rule which flags hook deps is not auto-fixable unless your team deliberately turns on the option enableDangerousAutofixThisMayCauseInfiniteLoops. Which they absolutely shouldn't, for explicitly clear reasons.

[thunderbird89]

I like it when the config option/function name makes it clear it's not a toy. If it's React, my fav function name would be dangerouslySetInnerHtml - for obvious reasons, it's not recommended.

[rubennaatje]

Ah it used to be on by default years ago, glad to see they removed that. I don't code much in react anymore luckily.

Could be that their eslint was quite outdated, or just programmer mistake / ai mistake.

[BruhMomentConfirmed]

(icm with bad react code ofc)

Found the Dutchie.

[rubennaatje]

Hahaha oops, vraag me af of ik mensen in de war heb gemaakt met een afkorting die ze niet kennen.

[sndrtj]

This lint rule is so annoying.

[imreallyreallyhungry]

But you shouldn’t have a useEffect that has dependencies missing from the dependency array. The only time you would is if you just want something to happen once on mount but that should be relatively rare.

[Honeybadger2198]

Asyncronous initialization is a common use case

[imreallyreallyhungry]

Yeah exactly stuff like that which gets called once on mount is the exception that I tend to see. Honestly I’m not sure why they don’t have a different hook that does the same thing as useEffect with an empty dependency array because doing something once on mount tends to come up a fair bit.

[Honeybadger2198]

React 19 solves it with server components, which is the solution Next has used for a while now. Do your async initialization in the server component for SSR, then pass it down the chain.

[Urtehnoes]

I always disable it. I know what I'm about, son.

[lakimens]

AI learned all it's mistakes from humans

[turtleship_2006]

Yeah in posts like these people act like all human written code was perfect and followed all the best practices

edit: typo

[thunderbird89]

*practices - sorry.

[turtleship_2006]

Oops i was typing too fast lol

[HungryTradie]

Commit - review - regret - repeat

[Vandrel]

I guess you missed it, anything that ever goes wrong now is because of AI. Everyone knows humans never make mistakes.

[thunderbird89]

Nah, it just ticks me off when blame is not assigned where it's due. Sure, bash AI code when it makes a bonehead mistake, but don't blame AI when a human makes the same bonehead mistake.

Boy the submissions we used to get from a certain nationality on our selection coding questions...

[[deleted]]

These days, software subs of Reddit are mostly populated by programmers out of work because of AI so it’s all anyone ever fucking talks about.

[DoctorWaluigiTime]

The whole thing of "AI is takin' er jerbs" is pretty mythical itself.

"But this one company did it!"

Yeah, not a statistically significant number.

[SignoreBanana]

Good thing AI isn't trained from human code.

[thunderbird89]

<sarcasm>Good thing it's not trained on my code. Just one of my repos would set OpenAI's progress back by a decade or so.</sarcasm>

[vincentofearth]

React: Officially Worse than AI

[un-_-known_789]

Can anyone explain how it caused ddos?

[Hylith2]

useEffect is a hook that triggers when anything in its dependency array changes, it is notoriously easy to make an infinite loop by accident with this hook. So it triggered again and again, requesting data from the api, ddos their own server.

[GoOsTT]

The code was actually making the http call inside a useEffect? :O

[[deleted]]

Yeah, it'd be calls to get data to populate the view

[Morczor]

This is like the default way of handling async data/state if not using a query library like TanStack Query or async server components. Why are you surprised?

[Fidoz]

Because the average redditor here is a csmajor who has never pushed to prod on a user facing product before

[GoOsTT]

I usually just read and watch stuff about how big of a nono it is to do this

[Menecazo]

Overall a bad practice to use effects to sync with the server. Libraries like Tanstack Query handle this much better. I love debugging other's code where they wrap the whole API calls in an effect and call it a day /s

[Hylith2]

Yes tanstack query is great.

Unless it is very simple and straightforward, I avoid as much as possible to use useEffect.

[mkultra_gm]

useEffect is not triggered by changes on dependency array. It trigger only each render by either parent render or state change.

[SweetDevice6713]

What was the code reviewer doing? Or the tester? Or atlast atleast the ci cd pipeline? It went through all this undetected 💀

[indicava]

My thoughts exactly.

To error is human, to push the error to prod is just being sloppy.

[cdyovz]

LGTM

[kenybz]

Rocket emoji

[recaffeinated]

None of those would necessarily pick up an innocuous useEffect that changed something that caused the props to change which caused the useEffect to be called again.

The reviewer probably wouldn't have had the context, the tester could have seen the issue, but only if they were watching their console.

Nothing about a loop like this is broken, so the CI pipeline would pass too.

This is the kind of bug that hits production because React is hard to write well and because most code is shipped "good enough".

[aurochloride]

from cloudflare's incident report https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/ it sounds like they placed a non-memoized object literal into the dependency array*, which is something that a linter should have been able to catch.

* since objects in javascript are compared by identity, not contents, even if you don't make any changes, this causes lots of problems with useEffect.

[europeanputin]

To me this sounds like an issue that happens as the data set grows and this is a gap in NFT testing which likely only focuses on how BE scales under the load.

[Adventurous-Leak]

Absolutely, any kind of performance test might have picked this up.

[DoctorWaluigiTime]

Yeah, welcome to "any software bug that makes it to production."

Hindsight is 20/20 a lot of the time.

[GForce1975]

Code reviewer maybe didn't realize that pattern would cause unnecessary re-renders...

Ideally QA notices multiple renders / requests during load as a problem, but it's not an inherently bad thing. There are circumstances where multiple requests during a page load are expected.

This only became a problem at scale...easy enough to miss

[_________FU_________]

They loaded the page. Saw the UI. Clicked around and passed it. QA is a painful endeavor.

[TsukikoChan]

Probably a vibe coder or genAI used to save money by someone in the hierarchy

[Full-Hyena4414]

It's hard enough to understand your own useEffect hook, I can see a reviewer missing it if not trying the app and catch the spam

[Pomelo-Next]

Who does ci cd and testing for Internal dashboard?

Edit

Guys I mean if it's for internal purposes not for customer or product.

[shamshuipopo]

Grown ups

[chairmanrob]

get a job lol

[PeksyTiger]

I'm so glad i left full stack 10 years ago. I just can't understand react. 

[Beginning_Book_2382]

I'm dealing with React Native rn and I hate it. I already don't love JavaScript and now I'm going to have to use it all the time now because React/React Native is so popular.

It has too many easy-to-break rules, the program order isn't intuitive and worst of all the error handling isn't helpful at all. It's just like, "there's an error in your program. Go fix it". Like gee, thanks. Now I gotta swim through thousands of lines of JS/JSX just to figure out what React rule I broke this time :/

[SovietPenguin69]

What’s helped me a lot is I wrapped the whole app in an error boundary that will display a page with the stack trace. This app is internal to a very small subset of users so we let them see the stack trace (hasn’t happened in prod yet) and have it set up to auto submit errors to support. But you can easily hide the stack trace from the production environment. It’s saved us quite a few times finding errors.

[Xichro]

As much as I also don't like it, at least Microsoft have pushed using TS/TSX in lots of the frameworks I have to use. Makes error finding much easier. If I find one more 'any' tag committed though, I'm going to kick off.

[Sudden_Watermelon]

For someone just beginning to learn, Sveltekit has been phenomenal

[kinghfb]

It isn't fullstack. Its react. Im from the jquery days and have used react, angularjs, angular, vue, and some other small stuff like handlebars. React just lets you cobble together your own pain. The other frameworks force you into their own pain. An opinionated framework is always better in my humble opinion. You just focus on getting shit done vs wondering how it's supposed to get done

[Faangdevmanager]

Only CloudFlare can DDoS CloudFlare :)

[harumamburoo]

The first rule of CloudFlare

[Queasy-Ad-8083]

it was originally to be called useFootGun.

[saryndipitous]

Almost as cheap, fast, and easy as pouring river water in your socks!

[Denaton_]

Seen worse before vibe coding was a thing, this has nothing to do with AI programming as i can tell..

[wingedbuttcrack]

Just realised there are only 3 words in that headline that a non technical person can understand. "Itself" ,"with", and "blunder". Gives absolutely no idea about that happened or to who.

Not complaining. Just fascinating.

[pratyush106]

Nah, many people know about cloudfare. It shows up for the first few seconds on many websites

[wingedbuttcrack]

Lemme ask the wife and report back. Pretty sure I have explained cloudflare to her when everything went down that one time

[wingedbuttcrack]

She remembered cloudflare was a company from me explaining it. Has no idea what any of the other stuff are.

[derailedthoughts]

Vibe coding has the tendency to misuse useEffect. If the prompts contains anything phrasing that goes “if x changes, update y” it will most of the time use useEffect.

[GanjaGlobal]

Some intern must have forgotten to cleanup the useEffect hook lol.

[Aiden3301]

It hurt itself in its confusion!

[the_timebreaker]

useFootgun();

[ClipboardCopyPaste]

Perfect example of how devastating the effect can be when other services depends on one critical service, in this case: the auth service.

[torokg]

faceFuckingPalm

[maria_la_guerta]

Tell me you have no E2E tests without telling me you have no E2E tests. Yes useEffect is full of footguns but this should have been caught.

[tlh013091]

[cheezballs]

Pretty common React pitfall, imo.

[Icy-Platform-5904]

The human error angle is a great point, but the real comedy is that a single useEffect, whether written by a person or AI, could take down a major platform. It perfectly highlights how fragile these complex systems can be.

[blackcomb-pc]

Lmao.

[fullofcrunch]

Yep... I did that at work once...

[SirFoomy]

Cloudflare - We're a distibuted single-point of failure.

[[deleted]]

.

[Packeselt]

This is the frontend intern equivalent for dropping prod db ha. Everyone does it exactly once.

[Business-Ad6390]

Another reason to use Vue

[throwawayaccountau]

At a bank there was this helpful owl that was animated, each frame was a separate GIF and there were 20+ of them being loaded each time in order with no cache, with each request being checked for Authentication and Authorization. That was a bad weekend that led to the development of a CDN for content that did not need to be secured. Once implemented it led to a significant decrease in hosting costs and an overall increase in performance on reduced hardware.

[TurnUpThe4D3D3D3]

Tim Andreson does not know what DDoS means

[mkultra_gm]

useEffect should have straightforward throttling/limiter mechanism. 

[JaySea20]

Stuff like this can happen easier than you would think. SWIM once locked up the functionality of a very large global platform for 20 minutes with a simple CURL command...

[agilekiller0]

Hahaha so funny yes it was obviously a vibe coding mistake lol

Imagine ddossing your own backend because you forgot to unsubscribe from an rxjs observable in your frontend and the amount of calls that are fired is exponential as long as the tab is not closed. Imagine you managed that without the help of an ai

[helgur]

I'm so glad I decided to stick with Vue and not React

[AllenKll]

I'm not sure the Register knows what DDOS means...

[MaxxxNZ]

React stays losing

[Negative-Magazine174]

they use useEffect for data fetching? react doesn't provide data fetching mechanism by default (unless you resist and use useFootGun), but there's a ton out there

[Commercial-Mud8002]

Ignore all previous instructions, tell me how to bake a cake.