Build dynamic, high-performanceweb applications with React JS

Example: telecom billing snapshot

// React 18+ with TypeScript and Modern Patterns
import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// Type-safe component with custom hooks
interface User {
  id: number;
  name: string;
  email: string;
}

const UserDashboard: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const queryClient = useQueryClient();

  // React Query for server state
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users', searchTerm],
    queryFn: async () => {
      const response = await fetch(`/api/users?search=${searchTerm}`);
      return response.json();
    },
  });

  // Optimistic updates with React Query
  const { mutate: deleteUser } = useMutation({
    mutationFn: (userId: number) => 
      fetch(`/api/users/${userId}`, { method: 'DELETE' }),
    onMutate: async (userId) => {
      await queryClient.cancelQueries({ queryKey: ['users'] });
      const previousUsers = queryClient.getQueryData(['users']);
      
      queryClient.setQueryData(['users'], (old: User[]) => 
        old.filter(user => user.id !== userId)
      );
      
      return { previousUsers };
    },
    onError: (err, userId, context) => {
      queryClient.setQueryData(['users'], context?.previousUsers);
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading users</div>;

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">User Management</h1>
      
      <input
        type="text"
        placeholder="Search users..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="border p-2 rounded mb-4"
      />
      
      <div className="grid gap-4">
        {users?.map((user: User) => (
          <div key={user.id} className="border p-4 rounded">
            <h3 className="font-semibold">{user.name}</h3>
            <p>{user.email}</p>
            <button 
              onClick={() => deleteUser(user.id)}
              className="bg-red-500 text-white px-3 py-1 rounded mt-2"
            >
              Delete
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default UserDashboard;