AI made my React app crash on load

I just got an infinite loop in a React app I’m working on. It escaped me for the longest time how the problem occured, but after several hours I found that it was actually AI that introduced it? That is - I accepted the solution suggested by an AI tool and this caused a bug I would never introduce if coding without AI.

I’m currently trying out Codeium - a free coding assistant for VS Code. It’s quite ok and at times it has some really good suggestions for boilerplate code. When you work with React, there’s quite a bit of repetition as you build a large app, so some AI support can make things faster but today it cost me two extra hours of debugging.

My bug

Look at the picture above. I have a React Stateless Function named Header. Underneath the logo, there is a Header Component. This obviously loops infinitely since it’s basically calling itself. The browser has no way to detect this loop since it takes a little while to render and only occasionally, Chrome will show you a dialogue to interrupt the code running so you get to the real Error code: RESULT_CODE_HUNG. Googling that took me to this StackOverflow page that hinted as to what could have caused the error.

The Symptoms

So for others that have a similar problem: If your React app hangs upon loading ANY page - look for this problem in a component that is used across all pages. My symptoms were that the app would hang as soon as it was accessed. No feedback. It just did not load anything. To debug the problem, I opened the browser Inspector and the main “index.js” file never loaded? Or did it?

It might look like that WebSocketClient.js is hanging here, but since the Websocket is basically a request that never have to end, that’s perfectly fine. In React it’s only being used to feed back data to your IDE, so this is not the problem. The real problem is that the main javascript is loaded, but enters an infinite loop on execution.

How AI made me dumber

So why on earth would I write a Header-tag there in the first place? It was late evening and I was tired. I was going to write a plain H3 tag, and the Codeium AI extension suggested to use Header instead. I would never use that over a H3 tag writing code by myself, but it looked good to my tired head - so without thinking, I accepted it.

I think this is one of the major drawbacks of the current generation of AI tools. They only know what is a likely continuation of what you’re doing. It does not take anything else into account. A smart tool for coders should never suggest something that could cause an infinite loop, but hey - I’m the one that accepted this lousy solution so it all comes back to me. Overall, I like using Codeium, but I’ll be a bit more careful with accepting suggestions from now on. One thing I really appreciate about it is being able to ask regarding security implications when solving a problem. This always points me to more reading about better ways to solve something.

Current AI code tools require MORE from the coder

So while AI coding tools are great for boilerplate, it does require a lot more of the person using it. This autumn I helped some students before an exam. This was the students that for some reason didn’t attend the normal exam, or those that wanted better grades. One of them used Copilot. I watched him code and I was absolutely perplexed by how quickly he would get himself into trouble for thinking that everything Copilot wrote was gold.

Copilot helped him autocomplete reading in data from an accelerometer. He wrote the first line where it read in the X value from JSON. Copilot then autocompleted the Y and Z values. This is good help and the main advantage of this generation of tools! After this, Copilot suggested also adding the vX, vY and vZ values. When the student also accepted these, I kept my mouth closed since I wanted to see what happened next. He then went on to accept even more useless suggestions from Copilot and this did of course cause a lot of pain later. After watching him struggle, I hinted that the sensor only delivers X, Y and Z vaules - since he was only sending that from the device (he AI-coded that part too).

So the main limitation of the current AI tools is their lack of a larger context. They really do not know what you’re trying to accomplish or working with and it requires skill to only accept the correct solutions. If you don’t know exactly what you’re doing, selecting the correct suggestion will take more time. For beginners it will thus likely take more time to use an AI tool than just coding it from scratch (if you include debug time for erroneous suggestions).

As for experienced programmers - remember the 80/20 rule? We only write code 20% of the time. The rest of the time is spent on understanding a problem, loading it into our brain, understanding the ramfications of changing code and then finding how to best implement the change. On shorts code snippets this only takes seconds, but on a large codebase it can take 15-20 minutes jsut to understand the ramfications of a change.

So the current generation of AI tools can help you do the 20% faster. Might not be worth it in the end if it’s sometimes causing problems like this? I’ll keep using Codeium and I’ll propbably write some more about AI tools here in the future, but my main impression is that they’re currently not smart enough to be used unless you’re 100% focused.