🧼 How to Write Clean React Code

Leap ChanVuthy — Thu, 22 May 2025 02:34:34 +0000

Writing clean code in React is not just about making it work—it's about making it readable, maintainable, and scalable. Whether you’re building a simple to-do app or a large-scale application, following clean code principles will make your life (and your team’s) much easier.

Here are some practical tips to help you write clean React code 👇

📁 Organize Your Folder Structure Structure your project in a scalable way. Avoid dumping all files in one folder.

Bad:

/src App.js index.js Component1.js Component2.js

Good :

/src /components /Navbar Navbar.jsx Navbar.module.css /Button Button.jsx /pages Home.jsx App.jsx index.js

🧩 Use Functional Components & Hooks Prefer functional components with hooks over class components.

// ✅ Clean
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

📦 Break Components into Smaller Pieces Keep components small and focused on one task. If a component is doing too much, break it into smaller ones.

// ❌ Bad
const Dashboard = () => {
  // fetching, rendering UI, handling logic... all in one
};

// ✅ Good
// Dashboard.jsx → uses <UserList />, <StatsPanel />, etc.

🧹 Clean Up useEffect Always clean up side effects to avoid memory leaks.

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => clearInterval(interval); // ✅ cleanup
}, []);

🧪 Write Reusable Hooks Extract reusable logic into custom hooks.

// useToggle.js
import { useState } from 'react';

export function useToggle(initialValue = false) {
  const [state, setState] = useState(initialValue);
  const toggle = () => setState(prev => !prev);
  return [state, toggle];
}

🚀 Final Thoughts
Clean React code is:

Easy to read 👓

Easy to reuse ♻️

Easy to test 🧪

Easy to maintain 🛠️

You don’t need to be perfect—just aim for improvement step by step. Happy coding! 🎉

DEV Community: Leap ChanVuthy

🧼 How to Write Clean React Code