L10: M5 Review

import React, { useState, useMemo, useCallback } from 'react';
import { useFetch } from '@/hooks/useFetch';
import ListingList from '@/components/ListingList';
import ListingFilters from '@/components/ListingFilters';

export function HomePage() {
  // 1. Custom hook - eliminates boilerplate
  const { data: listings, isLoading, error } = useFetch('/listings');
  
  const [search, setSearch] = useState('');
  const [dates, setDates] = useState({ from: null, to: null });
  const [guests, setGuests] = useState(1);
  
  // 2. useCallback - stable function references
  const handleSearchChange = useCallback((value) => {
    setSearch(value);
  }, []);
  
  const handleDatesChange = useCallback((newDates) => {
    setDates(newDates);
  }, []);
  
  const handleGuestsChange = useCallback((value) => {
    setGuests(value);
  }, []);
  
  // 3. useMemo - optimize filtering
  const filteredListings = useMemo(() => {
    if (!listings) return [];
    
    return listings.filter(listing => {
      const matchesSearch = listing.title
        .toLowerCase()
        .includes(search.toLowerCase());
      
      const matchesGuests = listing.maxGuests >= guests;
      
      const matchesDates = dates.from && dates.to
        ? isAvailable(listing, dates.from, dates.to)
        : true;
      
      return matchesSearch && matchesGuests && matchesDates;
    });
  }, [listings, search, dates, guests]);
  
  if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <Spinner />
      </div>
    );
  }
  
  if (error) {
    return (
      <div className="container mx-auto px-4 py-8">
        <ErrorMessage message={error} />
      </div>
    );
  }
  
  return (
    <div className="container mx-auto px-4 py-8">
      {/* 4. React.memo - prevents unnecessary renders */}
      <ListingFilters
        search={search}
        onSearchChange={handleSearchChange}
        dates={dates}
        onDatesChange={handleDatesChange}
        guests={guests}
        onGuestsChange={handleGuestsChange}
      />
      <ListingList listings={filteredListings} />
    </div>
  );
}

function isAvailable(listing, from, to) {
  // Date availability logic
  return true;
}

import React from 'react';
import { PropertyCard } from './PropertyCard';

// Memoized - doesn't re-render unless listings change
const ListingList = React.memo(function ListingList({ listings }) {
  if (listings.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        No listings found
      </div>
    );
  }
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {listings.map(listing => (
        <PropertyCard key={listing.id} listing={listing} />
      ))}
    </div>
  );
});

export default ListingList;

import React from 'react';
import { Link } from 'react-router-dom';

// Memoized - only re-renders when listing prop changes
const PropertyCard = React.memo(function PropertyCard({ listing }) {
  return (
    <Link 
      to={`/listings/${listing.id}`}
      className="block border rounded-lg overflow-hidden hover:shadow-lg transition"
    >
      <img 
        src={listing.images[0]} 
        alt={listing.title}
        className="w-full h-48 object-cover"
      />
      <div className="p-4">
        <h3 className="font-semibold text-lg">{listing.title}</h3>
        <p className="text-gray-600">{listing.location}</p>
        <div className="mt-2 flex justify-between items-center">
          <span className="text-xl font-bold">${listing.price}/night</span>
          <span className="text-sm text-gray-500">⭐ {listing.rating}</span>
        </div>
      </div>
    </Link>
  );
});

export default PropertyCard;

import { useState, useEffect } from 'react';
import api from '@/api';

// Cache outside hook - shared across all components
const cache = {};
const CACHE_DURATION = 5 * 60 * 1000;

export function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  
  const {
    cacheTime = CACHE_DURATION,
    enableCache = true
  } = options;
  
  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      // Check cache
      if (enableCache && cache[url]) {
        const cached = cache[url];
        const age = Date.now() - cached.timestamp;
        
        if (age < cacheTime) {
          setData(cached.data);
          setIsLoading(false);
          return;
        }
      }
      
      // Fetch from API
      try {
        setIsLoading(true);
        setError(null);
        
        const response = await api.get(url, {
          signal: controller.signal
        });
        
        // Update cache
        if (enableCache) {
          cache[url] = {
            data: response.data,
            timestamp: Date.now()
          };
        }
        
        setData(response.data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setIsLoading(false);
      }
    };
    
    fetchData();
    
    return () => controller.abort();
  }, [url, cacheTime, enableCache]);
  
  return { data, isLoading, error };
}

export function clearCache(url) {
  if (url) {
    delete cache[url];
  } else {
    Object.keys(cache).forEach(key => delete cache[key]);
  }
}