RIPPLE: SRAJAYA BHAKTA PRADHANANGA
When you’re learning React, it’s exciting to build your first components and see them work. But soon, your code may start to feel messy, hard to read, or difficult to update.
What Is Clean React Code?
Clean React code is:
- Easy to read
- Broken into small components
- Well-named and well-organized
- Reusable and simple to update
Break Components into Smaller Pieces
In React, it’s common to start with one big component. But big components get messy fast. Instead, split your UI into small, focused components.
Bad: One giant component
function ProfilePage() { return (
<div>
<h1>Ram Shrestha</h1>
<p>Email: ram@gmail.com</p>
<button>Edit</button>
</div>
);
}
Better: Split into reusable parts
function ProfilePage() { return (
<div>
<UserInfo />
<EditButton />
<Footer />
</div>
);
}
This makes your code easier to read, test, and reuse.
- Use Clear and Meaningful Names
Use names that explain what the component does.
Bad:
function A() {
return <div>Welcome!</div>;
}
Better:
function WelcomeMessage() { return <div>Welcome!</div>;
}
Good naming helps others (and future you) understand your code faster.
- Dont Repeat Yourself (DRY)
If you’re copying the same JSX multiple times, try to make it a reusable component.
Bad:
<h2>Title 1</h2>
<h2>Title 2</h2>
<h2>Title 3</h2>
Better:
function SectionTitle({ title }) { return <h2>{title}</h2>;
}
// Actual use
<SectionTitle title=”Title 1″ />
<SectionTitle title=”Title 2″ />
<SectionTitle title=”Title 3″ />
This keeps your code shorter and easier to update.
- Keep Logic Outside of JSX
JSX should focus on how things look. Move logic outside of the return statement when possible.
Bad:
return (
<div>
{user.isAdmin && <AdminPanel />}
</div>
);
Better:
const showAdminPanel = user.isAdmin ; return (
<div>
{showAdminPanel && <AdminPanel />}
</div>
);
This makes the JSX cleaner and more readable.
- Keep Files and Folders Organized
As your app grows, organize components into folders. Example structure:
/src
/components
/User
UserInfo.jsx EditButton.jsx
/pages
ProfilePage.jsx
Group related components together. This makes it easier to find and update files.
- Use less states as possible
Sometimes you want multiple components to share the same data. In React, you create a common state in the parent and share it among the children or use context to create a global state i.e. “Context” if its use is not limited to a parent.
Example:
function Parent() {
const [count, setCount] = useState(0);
return (
<>
<CounterDisplay count={count} />
<IncrementButton onClick={() => setCount(count + 1)} />
</>
);
}
This keeps your state in one place, and your components focused.
- Test Small Components Easily
Small, reusable components are easier to test. Even without a testing library, you can test manually by reusing components with different props.
<UserCard name=”Alice” />
<UserCard name=”Bob” />
My Messy Start with React
When I first started learning React, my code was… chaotic. I had one large file with all my logic, styling, and components mixed together. I didn’t know how to split code into smaller parts, or even why that mattered. I just wanted the UI to show up and the buttons to work. If something was working, I thought that was good enough.
But as my project grew, I started running into problems:
- It was hard to find things in my code.
- I kept repeating the same logic in multiple places.
- A small change in one part of the code would break something else.
- I would forget what my own code did just a few days later.
At that point, I realized I wasn’t just building a project — I was also building a mess. I needed to step back and learn how to write cleaner, more maintainable code.
How Refactoring Changed Everything
I went back and looked at my code . I started breaking large components into smaller ones. I gave them better names.. I also grouped related files into folders so I could find things faster.
Here’s what changed:
- My files were shorter and easier to read.
- I could reuse components in multiple places without copying code.
- I felt more confident adding new features because my code was organized.
- Debugging became easier — I knew where to look.
Refactoring wasn’t about making the code look fancy. It was about making it understandable for anyone else who might read it later.
This process showed me that clean code is a skill — one you learn with practice. Now, when I build something in React, I think about how to structure it from the beginning. And even when I don’t get it right at first (which still happens!), I know how to go back and clean it up.