React Component Architecture

Why Companies Choose React

React has been adopted by thousands of companies, from startups to enterprises:

• Facebook/Meta: Created React to solve their scaling UI challenges with their news feed
• Airbnb: Uses React to build their user interface and component library, enabling their designers and developers to work more efficiently
• Netflix: Rebuilt their platform using React to improve performance and development velocity
• Instagram: Uses React in their web application to provide a seamless user experience
• Discord: Relies on React for their web client to provide real-time updates and smooth interactions

Companies cite several benefits when adopting React:

• Improved developer productivity through reusable components
• Better performance for dynamic UIs with frequent updates
• Robust ecosystem with extensive libraries and tools
• Large talent pool of developers familiar with React
• Strong community support and continuous improvements

Component Design Philosophies

When designing components, developers often categorize them by their purpose and scope:

Presentational vs. Container Components

• Presentational Components: Focus on how things look (markup, styles)
  • Primarily concerned with the UI
  • Receive data and callbacks through props
  • Rarely have their own state (except for UI state)
  • Example: Button, Card, Modal
• Container Components: Focus on how things work (data fetching, state)
  • Concerned with data operations and behavior
  • Provide data and behavior to presentational components
  • Often stateful and connected to data sources
  • Example: UserList, ProductDetail, ShoppingCart

Atomic Design Methodology

This design system methodology breaks down components into five distinct levels:

1. Atoms: Basic building blocks (buttons, inputs, labels)
2. Molecules: Simple groups of UI elements functioning together (search form, menu item)
3. Organisms: Complex UI components composed of molecules (navigation header, product grid)
4. Templates: Page layouts without content (article layout, profile page)
5. Pages: Specific instances of templates with real content

Companies like Airbnb, IBM (with Carbon), and Material-UI use similar component hierarchies to maintain consistency and reusability in their design systems.

Real-World Component Organization

In production applications, components are typically organized into structured directories that reflect their purpose and relationships:

src/
├── components/
│   ├── common/             # Reusable across the app
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   ├── Button.test.jsx
│   │   │   ├── Button.module.css
│   │   │   └── index.js
│   │   ├── Card/
│   │   ├── Modal/
│   │   └── ...
│   ├── layout/             # Page structure components
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── Sidebar/
│   │   └── ...
│   ├── forms/              # Form-related components
│   │   ├── TextField/
│   │   ├── SelectField/
│   │   ├── Checkbox/
│   │   └── ...
│   └── features/           # Feature-specific components
│       ├── UserProfile/
│       ├── Dashboard/
│       ├── Authentication/
│       └── ...
├── hooks/                  # Custom React hooks
├── contexts/               # React context providers
├── utils/                  # Helper functions
├── pages/                  # Page components
└── ...
                

This organization strategy has several benefits:

• Discoverability: Easy to find and use existing components
• Scalability: Structure works for both small and large applications
• Reusability: Clear separation between common and feature-specific components
• Maintainability: Related files are grouped together
• Testability: Components are isolated and easier to test

Companies like Airbnb, Shopify, and Microsoft implement similar patterns in their React codebases, often with design systems that document and standardize component usage across teams.

Props Best Practices

In professional React applications, developers follow several best practices for prop usage:

Keep Components Focused

Avoid "prop drilling" (passing props through multiple levels of components) by:

• Using React Context for deeply shared data
• Decomposing components to minimize props needed
• Considering state management libraries for complex apps

Prop Naming Conventions

• Use clear, descriptive names (e.g., isDisabled instead of disabled)
• Use camelCase for prop names
• Prefix boolean props with "is", "has", or "should" (e.g., isVisible, hasError)
• Prefix event handlers with "on" (e.g., onClick, onSubmit)
• Prefix event handler implementations with "handle" (e.g., handleClick, handleSubmit)

Props Spreading

The spread operator can be used to pass all props from a parent to a child:

// Using spread operator for props
function Button(props) {
  return <button {...props} className="btn" />;
}

// This can be dangerous if not used carefully
function BetterButton({ className, children, ...rest }) {
  // Merge the provided className with our default
  const buttonClass = `btn ${className || ''}`.trim();
  
  // Only spread the remaining props
  return <button className={buttonClass} {...rest}>{children}</button>;
}
                

While convenient, props spreading should be used carefully to avoid passing unnecessary or unknown props to DOM elements, which can cause warnings or unexpected behavior.

JSX Best Practices in Professional Applications

Organization and Readability

• Extract complex logic into variables or functions before rendering
• Use fragments (<></>) to avoid unnecessary wrapper divs
• Keep components small and focused on a single responsibility
• Extract repeated JSX into separate components

// Before: Complex logic in JSX
return (
  <div>
    {users.filter(user => user.active).map(user => (
      <div key={user.id} className={user.isAdmin ? 'admin-user' : 'regular-user'}>
        {user.name}
      </div>
    ))}
  </div>
);

// After: Extracted logic and improved readability
function UserList({ users }) {
  const activeUsers = users.filter(user => user.active);
  
  const getUserClassName = (isAdmin) => isAdmin ? 'admin-user' : 'regular-user';
  
  return (
    <>
      {activeUsers.length === 0 ? (
        <p>No active users found.</p>
      ) : (
        activeUsers.map(user => (
          <UserItem 
            key={user.id} 
            name={user.name} 
            className={getUserClassName(user.isAdmin)} 
          />
        ))
      )}
    </>
  );
}

function UserItem({ name, className }) {
  return <div className={className}>{name}</div>;
}
                

Performance Considerations

• Use key props correctly to help React's reconciliation algorithm
• Avoid inline function definitions in render, which can cause unnecessary re-renders
• Memoize complex calculations with useMemo or useCallback

Accessibility

• Use semantic HTML elements where appropriate
• Ensure proper ARIA attributes for custom interactive elements
• Maintain tab order with proper tabIndex values

These practices are followed by companies like Airbnb, Facebook, and Microsoft in their design systems and component libraries to maintain code quality and developer productivity.