React Best Practices and Clean Code

# React Best Practices and Clean Code

1. Introduction #

2. Learning Objectives #

• Adopt standard naming conventions for components and hooks.

• Keep components small by adhering to the Single Responsibility Principle.

• Avoid the "Prop Drilling" trap.

• Extract complex logic out of JSX.

• Implement basic accessibility (a11y) standards.

3. Beginner-Friendly Explanations #

What is Clean Code? #

4. The 5 Pillars of Clean React #

Pillar 1: Naming Conventions #

• Components: PascalCase (UserProfile.jsx, NavigationBar.jsx).

• Standard Functions/Variables: camelCase (calculateTotal(), userData).

• Custom Hooks: camelCase starting with 'use' (useFetch.js, useTheme.js).

• Event Handlers: Prefix with 'handle' (handleSubmit, handleClick).

• Boolean Props: Prefix with 'is', 'has', or 'should' (isOpen, hasError).

Pillar 2: The Single Responsibility Principle #

Bad (Doing too much): ```jsx id="ch28ex1bad" function Header() { const [user, setUser] = useState(null); // Fetches data, handles layout, defines UI all in one place... }

**Good (Delegating tasks):**

jsx id="ch28ex1good" function Header() { return ( <header> <Logo /> <NavigationMenu /> <UserProfileWidget /> </header> ); }

### Pillar 3: Destructure Props Early
Always destructure your props in the function signature. It immediately tells other developers exactly what data this component expects.

**Bad:**

jsx id="ch28ex2bad" function UserCard(props) { return <div>{props.user.name} - {props.user.role}</div>; }

**Good:**

jsx id="ch28ex2good" function UserCard({ name, role }) { return <div>{name} - {role}</div>; }

### Pillar 4: Extract Logic from JSX
Keep your JSX (HTML) clean. Do not put heavy ternary operators or mapping logic directly inside the return statement if it makes it unreadable.

**Bad:**

jsx id="ch28ex3bad" return ( <div> {users.filter(u => u.isActive && u.age > 18).map(u => <Card key={u.id} {...u} />)} </div> );

**Good:**

jsx id="ch28ex3good" // Extract logic above the return const activeAdultUsers = users.filter(u => u.isActive && u.age > 18);

return ( <div> {activeAdultUsers.map(user => <Card key={user.id} {...user} />)} </div> );

### Pillar 5: Accessibility (a11y)
Clean code isn't just about developers; it's about users.
- Always include `alt` tags on `<img>` elements.
- Use semantic HTML (`<nav>`, `<main>`, `<button>`) instead of making everything a `<div>`. (Screen readers cannot read a `div` as a button!).
- Ensure text has high contrast.

## 5. Avoiding "Div Soup"
Beginners often wrap every single element in a `<div>` for styling purposes. This creates an incredibly deep and messy DOM tree. Use React Fragments `<></>` when you need a wrapper just to satisfy JSX rules, but don't need a physical element in the DOM.

## 6. Real-World Examples
In professional teams, code is reviewed by peers before it is merged. If you submit a PR (Pull Request) with a component named `dataRenderer.js` that contains 500 lines of code and uses `var x = 10`, it will be rejected. Adhering to clean code speeds up code reviews and prevents bugs.

## 7. Common Mistakes
- **Magic Numbers/Strings:** Writing `if (status === 2)` instead of defining a readable constant `if (status === STATUS_COMPLETED)`.
- **Inline Objects in Props:** Writing `<Child style={{ margin: 10 }} />`. This creates a brand new object in memory on *every render*, defeating `React.memo` performance optimizations. Define the object outside the component or use `useMemo`.

## 8. Best Practices
- **Use ESLint and Prettier:** These tools automatically format your code and yell at you when you break React rules (like the Rules of Hooks). Configure them in your VS Code immediately.

## 9. Exercises
1. Find an old React component you wrote in a previous chapter.
2. Refactor it: Destructure the props, extract inline logic into variables, and ensure all naming conventions are followed.

## 10. Mini Project: Refactoring a Messy Component
Look at this messy code and see how we clean it up using best practices.

**The Messy Component (Before)**

jsx id="ch28proj1a" function appDashboard(props) { const [d, setD] = useState(false); const click = () => { setD(!d); }

return ( <div> <div className="top"> <h1>Welcome</h1> {props.user && props.user.isAdmin === true ? <button>Admin Panel</button> : null} </div> <div> <button onClick={click}>Toggle</button> {d ? <div><p>Settings are open</p></div> : <div><p>Settings closed</p></div>} </div> </div> ) }

**The Clean Component (After)**

jsx id="ch28proj1b" // 1. PascalCase naming export default function AppDashboard({ user }) { // 2. Destructure Props // 3. Descriptive state names const [isSettingsOpen, setIsSettingsOpen] = useState(false);

// 4. Descriptive event handlers const handleToggleSettings = () => setIsSettingsOpen(prev => !prev);

// 5. Extracted logic const showAdminPanel = user?.isAdmin;

return ( // 6. Semantic HTML (main, header, section) <main className="dashboard-container"> <header className="dashboard-header"> <h1>Welcome, {user?.name || "Guest"}</h1> {/* 7. Clean conditional rendering (Logical AND) */} {showAdminPanel && <button className="admin-btn">Admin Panel</button>} </header>

<section className="settings-section"> <button onClick={handleToggleSettings} className="toggle-btn" aria-expanded={isSettingsOpen}> {isSettingsOpen ? 'Close Settings' : 'Open Settings'} </button> {/* 8. Clean UI rendering */} <div className="settings-content"> <p>Settings are {isSettingsOpen ? 'open' : 'closed'}.</p> </div> </section> </main> ); } ``

• Q: How do you avoid "Div Soup" in React? *(Answer: By using Semantic HTML elements and React Fragments <></>`)*.

• Q: What tools do you use to maintain clean code standards across a team? *(Answer: ESLint for code linting, Prettier for formatting, and strict PR reviews).*

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #