frontend-patterns

Frontend Patterns

Component Structure

Standard Component Layout

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { apiService } from '../services/api';
import './ComponentName.css';

function ComponentName({ walletState }) {
  // State
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  // Hooks
  const { id } = useParams();
  const navigate = useNavigate();
  
  // Effects
  useEffect(() => {
    loadData();
  }, [id]);
  
  // Handlers
  const handleAction = async () => {
    try {
      setLoading(true);
      setError(null);
      // ... operation
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  // Render helpers
  if (loading) return <LoadingState />;
  if (error) return <ErrorState error={error} />;
  
  return (
    <div className="component-name">
      {/* Content */}
    </div>
  );
}

export default ComponentName;

State Management

Loading States

Always show loading indicators:

const [loading, setLoading] = useState(false);

{loading && (
  <div className="loading-status">
    <div className="spinner"></div>
    <p>Processing...</p>
  </div>
)}

Error Handling

Display user-friendly errors:

const [error, setError] = useState(null);

{error && (
  <div className="alert alert-error">
    <p>❌ {error}</p>
  </div>
)}

Form Validation

Validate on both change and submit:

const handleInputChange = (e) => {
  const value = e.target.value;
  
  // Real-time validation
  if (value.length > MAX_LENGTH) return;
  
  setValue(value);
  setError(null);
};

const handleSubmit = async (e) => {
  e.preventDefault();
  
  // Pre-submit validation
  if (!value.trim()) {
    alert('Field is required');
    return;
  }
  
  // Submit
};

API Integration

Use API Service Layer

Never use axios directly in components:

// ✅ Good
const result = await apiService.createJob(jobData);

// ❌ Bad
const result = await axios.post('/api/jobs/create', jobData);