#🚀 React Clean Code Cheatsheet — Visual Guide

Writing clean React code isn't just about making things work — it’s about readability, maintainability, and scaling your components.

Here’s a simple visual cheatsheet that highlights best practices for building better React components.

---

✅ Do’s & Don’ts

🔸 Props

❌ Bad:

<MyButton txt="Click" col="blue" />

✅ Good:

<MyButton label="Click" color="primary" />

💡 Use meaningful, descriptive prop names.

---

🔸 Conditional Rendering

❌ Bad:

{!isLoading ? <Data /> : null}

✅ Good:

{isLoading && <Spinner />}

💡 Use early returns and avoid nesting where possible.

---

🔸 Folder Structure

❌ Bad:

/components
  Button.js
  Card.js
  Modal.js

✅ Good:

/components
  /Button
    index.tsx
    styles.module.css
    types.ts

💡 Organize by component, not by file type.

---

🔸 Logic Separation

❌ Bad:

const fetchData = async () => {
  const res = await fetch(...);
  const data = await res.json();
  setState(data);
};

✅ Good:

import { getUserData } from '@/services/user';

const user = await getUserData();
setUser(user);

💡 Keep logic in services or hooks. Components should be mostly UI.

---

🔸 useEffect Usage

❌ Bad:

useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

✅ Good:

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

💡 Always clean up your effects to avoid memory leaks.

---

📌 Final Tip

Clean code in React isn’t just for you — it’s for your teammates, your future self, and the community. Refactor small, commit often, and prioritize clarity over cleverness.

---