React Best Practices

This document outlines the best practices to follow when developing React components for VidsGenius.

Code Style

JSX Quotes and Entities

IMPORTANT: Unescaped entities cause deployment errors even though they may work in local development. Always escape the following characters:

1. Use proper JSX entity references for special characters:
   • For apostrophes: Use ' or ' (preferred in JSX) instead of '
     • Example: It's or It's instead of It's
   • For quotes: Use " or " instead of "
     • Example: The "example" instead of The "example"
   • For ampersands: Use & instead of &
     • Example: Standard & Poor instead of Standard & Poor

This prevents React's no-unescaped-entities errors during build and deployment.

2. Examples:

   // Good:
   <p>Don&apos;t forget to check the &quot;terms&quot; section</p>
    
   // Avoid:
   <p>Don't forget to check the "terms" section</p>

   Copy

3. Why this matters:

   • Improves code consistency
   • Prevents potential rendering issues in some browsers
   • Makes code more compatible with JSX parsing tools
   • Helps with internationalization and localization

Component Organization

1. Use the "use client" directive:

   • Add "use client"; at the top of any component file that uses React hooks
   • This is required for Next.js Client Components

2. Prefer functional components over class components:

   // Good:
   function MyComponent({ prop1, prop2 }) {
     return <div>{prop1}</div>;
   }
    
   // Avoid:
   class MyComponent extends React.Component {
     render() {
       return <div>{this.props.prop1}</div>;
     }
   }

   Copy

3. Use named exports for components:

   // Good:
   export function MyComponent() {...}
    
   // Avoid:
   export default function() {...}

   Copy

State Management

1. Use React hooks appropriately:

   • useState for component-local state
   • useReducer for complex state logic
   • useContext for global state accessed by many components
   • useMemo and useCallback for performance optimization (only when needed)

2. Keep state as local as possible:

   • Don't lift state higher than necessary
   • Use composition to pass state down when needed

Performance Optimization

1. Avoid unnecessary renders:

   • Use memoization (React.memo, useMemo, useCallback) for expensive computations
   • Avoid creating new objects or functions in render

2. Use proper keys for lists:

   // Good:
   {items.map(item => <ListItem key={item.id} {...item} />)}
    
   // Avoid:
   {items.map((item, index) => <ListItem key={index} {...item} />)}  // Only use index as last resort

   Copy

Testing

1. Write unit tests for components:

   • Test component rendering
   • Test user interactions
   • Test edge cases and error states

2. Use React Testing Library for component tests:

   • Focus on user interaction rather than implementation details
   • Test what the user sees and can do

Documentation

1. Add comments for complex logic:

   • Explain "why" rather than "what"
   • Document any non-obvious behavior

2. Use JSDoc for component props:

   /**
    * Button component with various styles
    * 
    * @param {Object} props - Component props
    * @param {string} props.variant - Button style variant
    * @param {ReactNode} props.children - Button content
    * @param {function} props.onClick - Click handler
    */
   export function Button({ variant, children, onClick }) {
     // ...
   }

   Copy

By following these practices, we can maintain a consistent, high-quality codebase that is easier to maintain and extend.