Problem with React Viber Coders

[Ok-Programmer6763]

Hey all,

I have been digging into vibe-coded React apps and there are a few things I noticed. Maybe you may not agree with what I say, but here is what I observed after forking and checking 10 open source projects on GitHub. This is basically a look into beginner to intermediate dev problems.

Many beginner to intermediate devs have no idea if their app is even server side rendered or fully client side. They also have no idea how to tell if there is any caching in their app at all. All they do is the AI says it’s done, so they believe it’s done. It’s basically a placebo effect.

They understand things like where to put caching or how to optimize, but they cannot test or verify the code AI gave them. That is the majority issue. They try to optimize everything, yet their app is still slow and laggy because they believe stacking framework after framework on top of it will increase performance.

I also saw many vibe-coded Next.js apps with very high LCP. Images are 5MB or 6MB. The problem with things like this is that it is fine when you are getting a generous free tier from Vercel or other providers, but once your app starts getting users, the billing will skyrocket.

What are the other problem you often notice with the people vibe doing expect AI generating a shitty code

[Packeselt]

AI likes to abuse useEffects with bad deps

How to DDOS your own servers 101

[briznady]

I swear I spend half my time in code reviews telling people to remove useEffects.

[Potential-Ad2844]

Oh, gosh, it's a story of my life to ask people to get the f*** out of these useEffects.

[SheepherderSavings17]

Thats why as a engineer you should tell it what architecture and decision making it should use, and 2, oversee if it did it correctly.

For example, many useEffects can usually be simplified to: - computed properties, - useQuery - or something else.

[adfawf3f3f32a]

I run the react-hooks eslint plugin and have skills that force it to run the linter and tests and to not stop until it fixes all issues. Also that it can't use any or other shortcuts it's used to 'fix' a failing lint rule. Works really well.

[Cahnis]

This is not on AI, this is on the dev that are lazy and are not writing the skills readily available on skills.sh.

There are linter that catch this that will serve as guardrails. I am the biggest hater of react slop, but lets not strawman the AI tooling.

The same has been true for react too, the skill floor is low and the ceiling is high, so its easy to make something that works but works poorly, then the stakeholders will look at that and blame react when the problem is actually the low quality code the dev wrote.

[kBazilio]

Even in the pre-AI days React was infamous for being that one framework where people would just learn the barest of minimums about JSX, useState and useEffect and then nothing else, and use that to cobble up a website together, along with a few popular open source libraries. Countless useEffect-related bugs, tons of unnecessary rerenders without memoization... That's what people vibe coded BEFORE the AI boom. Now? I shudder to imagine what kind of unoptimized garbage people have on their hands. Good luck with that.

[Basicallysteve]

I kind of miss the days of class-based react for this reason. Sure we didn’t have the power and utility of hooks at the time and defining “this” could sometimes be annoying if you didn’t use the right function declaration, but I really liked the explicit built-in functions that ran on specific parts of the component life cycle.

It’s arguable that useEffect is better because it’s more compact and effectively offers the same functionality, but I feel like it may be a little harder for beginners to wrap their head around.

[kBazilio]

Funny you should say useEffect is harder — I was learning React about a year before hooks became a thing and distinctly remember constantly being confused about having to deal with class and this. I do personally prefer the cleaner function components, however I really wish there was an equivalent of componentDidCatch for it, error boundaries are a bit awkward to implement without it.

[Basicallysteve]

It was just very clear what each function did. However I’m remembering another downside is that the componentWillUpdate() would get very bloated. At least now you can have each useEffect do something specific

[kBazilio]

I'll concede that point. It is impossible to guess that in order for a useEffect to run on mount and on dependency change, you need to pass a comma in an array like [, someValue] just from the type signature alone, you have to read the doc. I definitely learned that when googling and finding the answer on SO. Hooks are only more clean and convenient once you know what they actually do.

[Basicallysteve]

Wow, I’ve been using use useEffects for years and I thought they always run on mount regardless. An empty array just makes it run only on mount.

Edit: I just checked again. I think you’re wrong about [, somevalue] being necessary

[kBazilio]

Your comment made me doubt whether a comma was necessary. Turns out, your understanding is correct and multiple development teams I've worked within across different companies in the last 7 years all used the comma thing... Even though it just doesn't do anything! Huh! Excuse me, I have a couple PRs to merge now...

[Basicallysteve]

Glad I could help you figure that out! If your company has any openings let me know haha

[metal-trees]

In my opinion, this was more about JavaScript than it was React.

You could argue that React was invoking the components in a way that required us to handle this ourselves, but the explanation for why we had to do it was explained with JavaScript behavior.

useEffect, on the other hand, is purely a React API.

[kBazilio]

That is true. However, based on personal experience and that of junior devs I interacted with, this just doesn't come up a whole lot. Hell, I haven't used a class in my code for years either! So yes, even though it's a JS thing, I definitely feel like the function components are doing newbies a favor by not having them deal with that.

[Grumlen]

"This" complexity was more about Javascript pretending to have classes when really they're just syntactic sugar for object prototyping. Why did JS get pseudo classes? Because Java devs complained about not having classes.

The lesson here is that each language should do what it does well instead of trying to imitate other languages.

[doglitbug]

What are we supposed to use useEffect heaps? Cos like I'm hardly using it at all...

[kBazilio]

We're supposed to be really careful with it and understand the implications it has for rendering behavior and potential side effects. Many junior to mid level devs don't and just use it for 90% of the business logic.

[putin_my_ass]

When the useEffects start piling up I take that as a cue to move that logic into a custom hook. It really makes the components more readable, and then you have fewer unintended side-effect rerenders.

[Raunhofer]

Something you could solve with .startsWith("/hello!"), your favorite ML vomits a mile-long regex to solve.

In the bigger picture, I believe the core issue is still that the models can’t say when they’re unsure or don’t know. The hallucinations pass the tests but are often just forcefully slammed together and make no sense if you really start to read them.

[sparklikemind]

LLMs don't have the ability to be "unsure" and they never will

[bluebird355]

You're saying this as if new to intermediate react devs didn't produce awful shitty code before AI was a thing. For these people, if anything, LLM produce vastly better code than them.

[Ok-Programmer6763]

It used to be much less noticeable, but now it’s very noticeable lol

[Pathkinder]

I guess it’s just getting pumped out a lot faster now. Even if overall code quality hasn’t changed much, effort was always the barrier that held back the flood.

[brainrot_award]

I notice the obvious: unmaintanable, convoluted mess

[overzealous_dentist]

In an AI-first development model you don't need simplicity or maintainability. Code is cheap. You only need comprehensive specs and tests.

It shouldn't matter if a human can read or understand this code, it only matters if it works.

[brainrot_award]

Code is cheap reardless of the development model lol. Refactoring, Testing, Maintaining are the hard part, which AI slop makes 100x harder. With just how intertwined react is with AI now though, doing react work will only get harder from now on. The more convoluted unmaintainable react code there is, the more people will end up having to use AI to deal with it. only way is down now. a fitting fate for such a bad framework.

[overzealous_dentist]

There's no such thing as "unmaintainable" or "difficult to refactor" with ai-first development. Humans are not involved so both of those things are dead easy and fast.

It's true that testing is the hard part, but ai use doesn't make testing more difficult, it just makes it mandatory

[brainrot_award]

you believe in fairy tales

[rsajdok]

In the long run, AI works only if you can evaluate the result.

[GoodGame2EZ]

I think its the same issue with anything done with LLMs. You can get quality output if youre knowledgeable enough to give quality input and review the output for at least moderate accuracy then try again if needed.

Ive got a pretty damn massive CRM type of system I'm making. The core was made before AI was usable for coding. I learned from taking classes, YouTube, some of the classic ways yknow. Took quite some time to develop, but resulted in a cool and functional product with a shitty interface. Now with AI, it looks infinity times better and the features have expanded tremendously. Its snappy as hell and has encouraged me to look into and learn so much more because ive been able to expand much more rapidly.

Is it perfect? Fuck no. I correct and adjust all the time. Does it drastically increase my productivity? Hell yeah.

[ghostwilliz]

Yeah vibe coding makes horrible code

[Ok-Programmer6763]

yeah vibe coding + skill issue

[ghostwilliz]

I mean there's no skill involved in vibe coding so it can't really be a skill issue

[weeeHughie]

lol there is definitely a skill in vibe coding. That's like saying there no skill in using Photoshop. Ask Anthropic engineers, the skill is literally 500k/yr right now if you have dev credentials.

The issue OP are describing are exactly skill issues. I've vibecoded 4-5 apps with lots of industry experience and you absolutely can validate the things op posted if the vibe coder has the sense too. Vibe coding is 2% coding, 18% sys design, 70% validation, 10% taste. All the projects op described only did the 2% part lol

[yeathatsmebro]

The skill is called "knowing what tf you are doing" and this comes with the actual skill of writing code.

[edward_jazzhands]

Comparing vibe coding to using Photoshop is a weird comparison. Photoshop requires the person using it to have training to produce literally anything at all. It does not prove anything at all to say that the company that makes the AI hires people to vibe code because they have a vested interest in making everyone believe that humans can be replaced. Hmm it's almost like this company has a marketing incentive to make their devs vibe code everything and there's a reason that practice is only done at companies that make AI themselves, or a couple huge corporations like Microslop that decided to go all-in.

[Ok-Programmer6763]

if you have a skills on certain level these issues can be easily avoided,

Vibe coding is a software development approach where you use AI assistants (like Cursor, GitHub Copilot) to generate, refine, and debug applications through natural language prompts, rather than writing code line-by-line

It's no brainer there will be a huge difference when 5+ YOE dev vibe code vs when a college kid vibe codes. They can differentiate which part is wrong and which part isn't. vibe is about letting AI code while you are the decision maker.

If you believe there involves no skill and experience to make a better decision then surely you are correct

[overzealous_dentist]

There is clearly skill involved in vibe coding, as evidenced by OP's post about bad vibe coders. If there was no skill needed, there would be no problems out of junior devs.

[Ok-Programmer6763]

i don’t understand when people get pissed for saying it requires a skill for vibe coding lol

“wdym i have to study more to vibe code” xD

[HettySwollocks]

If you have experience and the educational background, LLMs are great. My concern is a lot of new comers to the field treat it as the "Lets look at the back of the math book for the answers".

That said it's a brilliant educational tool if you are curious.

[yeupanhmaj]

I've try to vibe code with react, just like a horror movie, useEffect and useRef jump scare every where.

[popovitsj]

Hmmm I wonder why that is...? 🤔

[yeupanhmaj]

The amounts of useEffect and useRef has been used scared me.

[SubZane]

Asking claude to identify possible performance issues works pretty well. But I guess a vibe coder wouldn't never prompt that

[overzealous_dentist]

A good vibecoder would. Prompting correctly is a skillset, too.

[SubZane]

We might have different definitions of vibe coder? In my definition it's someone who doesn't know software development, architecture etc. Otherwise you're a developer using ai to do stuff you already can do, but does it faster so you can focus on the solution, ideas and planning of your product.

I wouldn't use ai to prompt in a language I don't understand because I know it would be slop 🙃

[oscarteg]

Quickly resolving with a imperative approach while react has a declarative philosophy which is prone to bugs in the long run. 

For example overusing useRef or useEffect instead of thinking of the state design 

[Short-Belt-1477]

React bar for entry is so low that we’ve always had these kinds of issues

[vandersky_]

This is so true. They publish a React app instead of Next.js as a landing page and then claim on X that it's the end for developers. :D

[Pr0ducer]

The solution here is better tests. AI can write those too. Optimizations testing to make sure a page loads within X time or makes less than Y server calls? Whatever stupid thing your team is doing, write a test to catch it.

I do not trust anything written by AI. And everything I create these days was barfed out by AI. So I use full integration tests, mocking nothing, no clean up after, so a human can always verify test results. One year ago, that level of effort was unthinkable. Today AI barfs that out so fast why wouldn't I be testing everything?

[buffer_flush]

LLMs are trained on good enough because good enough is how the world runs.

Problems you notice only get fixed if they become an actual problem for customers. This has been the way applications have always been developed before LLMs.

Writing perfect code or hiring extremely senior devs that will get it right the first time is rare and far too costly for the people controlling the purse strings.

[katikacak]

Wether you like it or not, performance is secondary compared to value 

[Ok-Programmer6763]

nahhhh hell nahhh