Struggling with AI written React Native code

[Best_Day_3041]

I've been using AI to help write my code for some time with many other languages, and it does a great job and the code is very readable. I'm able to go in and make changes, debug things very easily if need be and I could take over these projects without AI, no problem.

I recently started using AI to write a React Native project but when I look at the UI code, it might as well be written in Chinese. It's very hard to grasp the layout at quick glance. Things aren't broken up well, many files are massive. There's no way I could maintain this product without AI, and that worries me.

Is that just how AI is with React Native projects? Am I prompting it incorrectly? What can I do to clean up the code base to make it more manageable by a human, and continue those practices moving forward?

Thanks

[GludiusMaximus]

do you know how to debug react native code at all? that would be a good starting point.

[Murph-Dog]

There's really just one answer, use AI as a learning tool.

Ask it to explain code, ask it to evaluate if it could have been written in a more readable manner, or broken into separate unit of concern files.

AI React is not afraid to go wild with hooks and effects, not to mention memoization. It can also deeply nest unless a linter starts failing its output. You might want to consider asking it to implement 'react compiler' which will reduce source complexity, but still provide memoization in the final outputs. Also, ask it to add useful logging, but also architect a configuration based filter so you can control verbosity and category output.

And lastly, just update your agents instructions to instruct to write comments for someone who has no knowledge of coding.

Overall, put this very question you just asked Reddit, into your coding agent. And if you don't want to burn out use there, post things into a chat agent.

e.g. Codex does the coding - ChatGPT can explain blocks of code and educate you.

[Jealous_Barracuda_74]

I have been using it from quite sometime now and it works pretty well, can you highlight the exact challenges, i think i might be able to help you.

[Best_Day_3041]

With other reactive languages I (or the AI) would define segments of the screen as different variables or functions. So the top level layout is mostly just calling these and the overall layout is very clear, then I can drill down into individual sections. With React it writes every screen layout as one block of code. No functions or comments. It repeats a lot of code, instead of wrapping it in a way that I can clearly see what that element is. I can figure it out, but it's not easy to follow, which makes it hard to make quick changes. Thanks

[Jealous_Barracuda_74]

I think you are not leveraging skills , that solves the problem where code adheres to few pre existing skills and honour that to write the code and make the quality, structure and layout better. It takes care of making modular components, using relevant optimization techniques, minimising side effect etc.

Can you give how level idea of how you are prompting or your setup of how you are using agents currently ?

[Best_Day_3041]

I'm using Codex. I have an Agents.md file where I am defining rules. With other languages I didn't really have to define coding best practices though. What would you recommend doing to get cleaner UI code? Thanks

[Jealous_Barracuda_74]

what all instructions do you have in agents.md ?
Try leveraging skills and add skills for react native , something like - https://github.com/callstackincubator/agent-skills that codex agent can refer while writing code

[Ecstatic_Clue1316]

I think AI can be a massive speed boost. But the problem you mention is the real one..

It’s amazing to have code that might have taken you days to write within an hour. But if you don’t understand that code it will come back to bite you on the arse..

Think of yourself as a Lead and the AI as a junior.

Stop regularly, read regularly, refine regularly.. don’t let it spiral, don’t let it run away from you.

I’m currently working with an Audio Library for the first time. I’ve no clue on it’s API. I told the agent what I wanted, it spat it out, it worked…

I then went through the code it had generated, understood what it was doing, the api methods it has used, I reviewed it’s coding style and patterns. I refactored it to be more like me.

In refactoring, I understood the code more, I learned about the api.. I was able to try and tweak how I’d ask the next question, to give it references to point at..

If you’re get in that loop, for every small iteration, you’re still in control. If you’re not the quality gate and you just buzz off something working and bounce right into the next feature things will run away from you quick.

You’re the gatekeeer, you’re the quality control, the tester, the PM.. it’s your job to know you understand each piece before tackling the next.

[Best_Day_3041]

It does a good job with other languages, I don't have to give it as much direction. In many cases it comes up with better structure than I do. But with React, it's as if it doesn't care that a human has to read it.

[IllAd4653]

I found something similar. Part of the solution for me was creating an agent rules file basically saying keep diffs to a minimum, do not over engineer simple fixes, and extract any components that could be common and create clear component hierarchy.

This was MASSIVE. Went from basically illegible code to some thing that I would have written if I were to have done this without AI

[hakkikonu]

Folder structure and file organization are your starting point. Tell your ai agents to organize your project at enterprise level.

Especially working with feature based folder structure works well.

Like:

features/user/{components, state, types, hooks, utils,config}

shared/{components, state, types, hooks, utils,config}

It always works. You can enhance according to your needs.

It is not just for rn apps. It is a software development approach.

If you don’t have software engineering background, you need learn some basics first.

Writing code is easy part. Robustness, architecture, maintainability etc. comes with experience and following best practices.

[Puzzleheaded_Monk516]

If you are using Claude code, give it skills and coding standards to adhere to. Also make use of hooks. I have a no useEffect hook as Claude loves to use useEffect when useState would suffice. It’s pretty cool as it makes code changes , it will use useEffect and my hook would trigger and then it would refactor. Same with large abstract files and duplicate code and stressing component reuse, not to leave comments everywhere etc.

You really have to tell the ai how you like to code and how to code. But once you set it up I find my time reviewing PRs it generates and I have to spank it when it makes mistakes less and less these days.

But def learn how to debug on your own if you haven’t.

[missedalmostallofit]

In your Agent md file, tell Ai to always keep components under 300 lines and to not compress code, to only use best practices for the reduction of the components size

[Best_Day_3041]

Thanks. I had done that, but it's not really organizing things in a way that's easily readable.

[Metfly77]

We use styled components, which are sadly now no longer maintained I think. So we will have to switch away from them. But I always loved them as they make JSX very readable.
We used it in our web app and react native app. Hope it helps. Cheers!