VidsGenius
Docs
React and JSX Best Practices

React and JSX Best Practices

Guidelines for writing maintainable and error-free React and JSX code in the VidsGenius project.

React and JSX Best Practices

This guide outlines best practices for writing React components and JSX in the VidsGenius project.

Quotes in JSX

Always Escape Quotes in JSX

One of the most common issues that can break builds is unescaped quotes in JSX. Always use one of these methods to handle quotes in JSX:

  1. Use single quotes for JSX attributes, double quotes for content:

    // GOOD
<Button className='text-sm'>Click "here"</Button>

  2. Escape double quotes in JSX attributes:

    // GOOD
<Button className="text-sm font-\"bold\"">Click</Button>

  3. Use template literals for complex string combinations:

    // GOOD
<Button className={`text-sm ${size === "large" ? "p-4" : "p-2"}`}>
  Click
</Button>

  4. Use entity references for quotes in content:

    // GOOD
<p>The user said &quot;Hello World&quot;</p>

  5. Use curly braces for dynamic content with quotes:

    // GOOD
<p>The user said {"\"Hello World\""}</p>

Examples of Problematic Code

// BAD - Will cause build errors
<p className="text-"bold"">Click here</p>
<div style="width: "100%"">Content</div>

Component Organization

File Structure

  • One component per file (except for very small related components)
  • Use PascalCase for component files and function names
  • Group related components in feature folders

Component Patterns

  • Prefer functional components with hooks over class components
  • Extract reusable logic into custom hooks
  • Use TypeScript interfaces for props
  • Provide default values for optional props

Code Style

General Guidelines

  • Use consistent indentation (2 spaces)
  • Use semicolons at the end of statements
  • Keep components focused on a single responsibility
  • Use descriptive variable and function names

Imports

  • Group imports by:
    1. React and Next.js imports
    2. Third-party libraries
    3. Project components and utilities
    4. Styles

Props

  • Destructure props in function parameters
  • Use type annotations for all props
  • Document complex props with comments

Performance Optimization

  • Use React.memo for components that render often with the same props
  • Use useMemo and useCallback for expensive computations and callback functions
  • Avoid unnecessary re-renders by keeping state as local as possible

Testing

  • Write tests for all interactive components
  • Test both success and error states
  • Use meaningful test descriptions

Accessibility

  • Use semantic HTML elements
  • Include ARIA attributes when necessary
  • Ensure keyboard navigation works
  • Maintain sufficient color contrast

Error Handling

  • Implement error boundaries for critical components
  • Provide fallback UI for failed component renders
  • Log errors appropriately

By following these guidelines, we can maintain a consistent, high-quality codebase and avoid common issues during development and deployment.