Performance Optimization

Best practices for optimizing performance when using Countries Cities AR

Bundle Size Optimization

Reduce your bundle size by importing only what you need:

❌ Don't

import * from 'countries-cities-ar';

✅ Do

import { getCountryByCode, searchCountries } from 'countries-cities-ar';

Regional Imports

Import only specific regions to reduce bundle size:

// Import only Arab countries
import { africaCountries, asiaCountries } from 'countries-cities-ar';

const arabCountries = [
  ...africaCountries.filter(c => ['EG', 'LY', 'TN', 'DZ', 'MA', 'SD'].includes(c.code)),
  ...asiaCountries.filter(c => ['SA', 'AE', 'KW', 'QA', 'BH', 'OM', 'YE', 'SY', 'IQ', 'JO', 'LB', 'PS'].includes(c.code))
];

Lazy Loading

Load data only when needed using dynamic imports:

// Dynamic import for heavy operations
const loadCountries = async () => {
  const { allCountries } = await import('countries-cities-ar');
  return allCountries;
};

// Use with React Suspense
const CountryList = lazy(() => import('./CountryList'));

Memoization

Cache expensive operations for better performance:

CountrySelector.tsx

import { useMemo } from 'react';
import { allCountries } from 'countries-cities-ar';

function CountrySelector({ region }) {
  // Memoize filtered countries
  const filteredCountries = useMemo(() => {
    if (!region) return allCountries;
    return allCountries.filter(c => c.region === region);
  }, [region]);
  
  // Memoize sorted countries
  const sortedCountries = useMemo(() => {
    return [...filteredCountries].sort((a, b) => 
      a.nameAr.localeCompare(b.nameAr, 'ar')
    );
  }, [filteredCountries]);
  
  return (
    <select>
      {sortedCountries.map(country => (
        <option key={country.code} value={country.code}>
          {country.nameAr}
        </option>
      ))}
    </select>
  );
}

Pro Tips

• Use virtual scrolling for long lists (react-window)
• Implement search debouncing (300ms recommended)
• Consider server-side filtering for large datasets
• Use React.memo for pure components