Performance optimization recommendations

Component development standards and performance optimization are essential aspects of front-end engineering. Proper standards and optimization techniques can enhance code quality, maintainability, and runtime efficiency while reducing maintenance costs.

Component Development Standards

Naming Conventions

Component names should use PascalCase and match the file name. For example:

// Button.jsx
function Button() {
  return <button>Click</button>;
}

// IconButton.jsx
function IconButton() {
  return <button>🔔</button>;
}

Directory Structure

Organize components by functionality:

components/
  ├── common/        # Common components
  │   ├── Button/
  │   │   ├── index.jsx
  │   │   ├── style.module.css
  │   │   └── test.js
  ├── features/      # Business components
  │   ├── UserCard/
  │   │   ├── index.jsx
  │   │   └── hooks.js

Props Design

1. Use PropTypes or TypeScript to define types.
2. Keep props flat and avoid deep nesting.
3. Set reasonable default values for commonly used props.

interface CardProps {
  title: string;
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

function Card({ title, size = 'md', onClick }: CardProps) {
  // ...
}

State Management

1. Prefer useState for internal component state.
2. Extract complex state logic into custom Hooks.
3. Avoid directly using global state in components.

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

function Switch() {
  const [on, toggle] = useToggle();
  return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;
}

Performance Optimization Recommendations

Rendering Optimization

1. Use React.memo to avoid unnecessary re-renders.
2. Use useMemo/useCallback wisely to cache computed values.
3. Always add key props to list items.

const ExpensiveComponent = React.memo(function({ data }) {
  // Only re-renders when data changes
  return <div>{expensiveCalculation(data)}</div>;
});

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Resource Loading

1. Implement code splitting for on-demand loading.
2. Use lazy loading for images.
3. Preload critical resources.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Memory Management

1. Clean up event listeners promptly.
2. Avoid memory leaks.
3. Use virtual lists for large datasets.

function ScrollListener() {
  useEffect(() => {
    const handleScroll = () => {
      console.log(window.scrollY);
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
}

CSS Optimization

1. Avoid deeply nested selectors.
2. Use CSS Modules or styled-components.
3. Minimize reflows and repaints.

/* Avoid */
.container .list .item .icon {
  color: red;
}

/* Recommended */
.itemIcon {
  color: red;
}

Build Optimization

1. Use Tree Shaking to remove unused code.
2. Minify and obfuscate code.
3. Configure splitChunks appropriately.

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },
};

Performance Monitoring and Analysis

Performance Metrics

1. Use the Performance API to measure key metrics.
2. Monitor First Contentful Paint (FCP).
3. Track Largest Contentful Paint (LCP).

// Measure function execution time
function measure() {
  performance.mark('start');
  // Execute code
  performance.mark('end');
  performance.measure('measure', 'start', 'end');
  const duration = performance.getEntriesByName('measure')[0].duration;
  console.log(`Execution time: ${duration}ms`);
}

Chrome DevTools Tips

1. Use the Performance panel to record runtime performance.
2. Analyze memory usage with the Memory panel.
3. Check code coverage with the Coverage panel.

// Manually trigger garbage collection (debugging only)
if (window.gc) {
  window.gc();
}

Real User Monitoring (RUM)

1. Collect metrics like FP, FCP, and LCP.
2. Track JavaScript errors.
3. Monitor API request performance.

// Report performance data
function reportPerf() {
  const timing = window.performance.timing;
  const loadTime = timing.loadEventEnd - timing.navigationStart;
  navigator.sendBeacon('/analytics', { loadTime });
}

window.addEventListener('load', reportPerf);

Solutions to Common Performance Issues

Long List Rendering

1. Use virtual scrolling techniques.
2. Implement pagination.
3. Reduce DOM node count.

import { FixedSizeList as List } from 'react-window';

function BigList({ items }) {
  return (
    <List
      height={500}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    </List>
  );
}

Animation Performance

1. Use transform and opacity properties.
2. Enable GPU acceleration.
3. Avoid JavaScript in animations.

/* High-performance animations */
.box {
  transition: transform 0.3s ease;
  will-change: transform;
}

.box:hover {
  transform: scale(1.1);
}

High-Frequency Event Handling

1. Use debouncing/throttling.
2. Use passive event listeners.
3. Avoid heavy operations in event handlers.

// Throttle implementation
function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

window.addEventListener('scroll', throttle(handleScroll, 100));