React Clean Code

Principles for clean React code.

Single Responsibility

```javascript // Bad - component does too much function UserDashboard() { // Fetch users // Fetch posts // Handle auth // Render everything }

// Good - split responsibilities function UserDashboard() { return ( <> <UserList /> <PostList /> </> ); } ```

DRY (Don't Repeat Yourself)

```javascript // Bad - repeated code <button onClick={handleClick} style={{...}}>Submit</button> <button onClick={handleCancel} style={{...}}>Cancel</button>

// Good - reusable component function Button({ onClick, children, variant }) { return <button onClick={onClick} className={variant}>{children}</button>; } ```

Meaningful Names

```javascript // Bad const d = new Date(); const arr = users.map(u => u.n);

// Good const currentDate = new Date(); const userNames = users.map(user => user.name); ```

Keep Components Small

```javascript // Aim for < 200 lines per component // If larger, split into smaller components ```

Early Returns

```javascript function User({ user }) { if (!user) return <div>No user</div>; if (user.loading) return <Spinner />; if (user.error) return <Error />;

return <div>{user.name}</div>; } ```

Remember

- One responsibility per component - Don't repeat code - Use meaningful names - Keep components focused - Early returns for readability

> Next: Learn performance profiling!