Asynchronous Content Loading #

// ANTI-PATTERN: Waterfall request — sequential await
async function loadDashboard() {
  const user = await fetchUser()          // 300ms
  const orders = await fetchOrders()      // 250ms (mulai setelah user selesai)
  const reco = await fetchRecommendations() // 400ms (mulai setelah orders selesai)
  // Total: 950ms
  renderDashboard({ user, orders, reco })
}

// BENAR: Parallel request — Promise.all
async function loadDashboard() {
  const [user, orders, reco] = await Promise.all([
    fetchUser(),            // semua dimulai bersamaan
    fetchOrders(),
    fetchRecommendations(),
  ])
  // Total: ~400ms (hanya menunggu yang terlama)
  renderDashboard({ user, orders, reco })
}

// LEBIH BAIK: Promise.allSettled — tidak gagal karena satu request gagal
async function loadDashboard() {
  const results = await Promise.allSettled([
    fetchUser(),
    fetchOrders(),
    fetchRecommendations(),
  ])

  const [userResult, ordersResult, recoResult] = results

  renderDashboard({
    user:   userResult.status === 'fulfilled' ? userResult.value : null,
    orders: ordersResult.status === 'fulfilled' ? ordersResult.value : [],
    reco:   recoResult.status === 'fulfilled' ? recoResult.value : [],
    // Render dengan data yang tersedia, meski sebagian gagal
  })
}

// ANTI-PATTERN: Scroll event untuk lazy load (sangat boros)
window.addEventListener('scroll', () => {
  const elements = document.querySelectorAll('[data-lazy]')
  elements.forEach(el => {
    const rect = el.getBoundingClientRect()
    if (rect.top < window.innerHeight) {
      loadContent(el)  // getBoundingClientRect dipanggil SETIAP SCROLL EVENT!
    }
  })
})
// Setiap scroll event = layout recalculation = jank!

// BENAR: Intersection Observer — browser yang handle deteksinya
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadContent(entry.target)
      observer.unobserve(entry.target)  // berhenti observasi setelah dimuat
    }
  })
}, {
  rootMargin: '200px',  // mulai load 200px sebelum masuk viewport
  threshold: 0          // trigger saat pixel pertama masuk viewport
})

// Attach ke semua elemen yang perlu lazy load
document.querySelectorAll('[data-lazy]').forEach(el => {
  observer.observe(el)
})

// React Hook untuk lazy loading dengan Intersection Observer
import { useEffect, useRef, useState } from 'react'

function useLazyLoad(options = {}) {
  const ref = useRef(null)
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true)
        observer.unobserve(el)  // hanya perlu trigger sekali
      }
    }, { rootMargin: '200px', ...options })

    observer.observe(el)
    return () => observer.unobserve(el)
  }, [])

  return [ref, isVisible]
}

// Penggunaan:
function ProductComments({ productId }) {
  const [ref, isVisible] = useLazyLoad()

  return (
    <div ref={ref}>
      {isVisible ? (
        <CommentsSection productId={productId} />
      ) : (
        <CommentsSkeleton />
      )}
    </div>
  )
}
// Comments hanya di-fetch saat user scroll mendekati section ini

// Implementasi Infinite Scroll dengan Intersection Observer
function InfiniteProductList() {
  const [products, setProducts] = useState([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [isLoading, setIsLoading] = useState(false)
  const loadMoreRef = useRef(null)

  // Trigger fetch saat "sentinel" element masuk viewport
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && hasMore && !isLoading) {
        setPage(p => p + 1)
      }
    }, { rootMargin: '300px' })  // mulai fetch 300px sebelum bottom

    if (loadMoreRef.current) observer.observe(loadMoreRef.current)
    return () => observer.disconnect()
  }, [hasMore, isLoading])

  // Fetch saat page berubah
  useEffect(() => {
    if (page === 1 && products.length > 0) return

    setIsLoading(true)
    fetchProducts(page).then(newProducts => {
      setProducts(prev => [...prev, ...newProducts])
      setHasMore(newProducts.length === 20)  // ada lebih banyak jika dapat 20 item
      setIsLoading(false)
    })
  }, [page])

  return (
    <div>
      <ProductGrid products={products} />

      {/* Sentinel element — ketika ini masuk viewport, trigger fetch */}
      <div ref={loadMoreRef}>
        {isLoading && <LoadingSpinner />}
        {!hasMore && <p>Semua produk sudah ditampilkan</p>}
      </div>
    </div>
  )
}

// Debounce: tunggu user berhenti sebelum eksekusi
// Ideal untuk: search input, form auto-save
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    return () => clearTimeout(timer)  // reset timer setiap value berubah
  }, [value, delay])

  return debouncedValue
}

// Penggunaan untuk search:
function SearchBar() {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 300)  // tunggu 300ms setelah user stop typing

  const { data: results } = useQuery(
    ['search', debouncedQuery],
    () => searchProducts(debouncedQuery),
    { enabled: debouncedQuery.length > 2 }  // fetch hanya jika minimal 3 karakter
  )

  return (
    <>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Cari produk..."
      />
      <SearchResults results={results} />
    </>
  )
}

// Throttle: batasi frekuensi eksekusi
// Ideal untuk: scroll position tracking, resize handler, mouse move
function throttle(fn, limitMs) {
  let lastCall = 0
  return function(...args) {
    const now = Date.now()
    if (now - lastCall >= limitMs) {
      lastCall = now
      return fn(...args)
    }
  }
}

// Throttle scroll position untuk fetch konten
const handleScroll = throttle(() => {
  const scrollPercent = (window.scrollY / document.body.scrollHeight) * 100
  if (scrollPercent > 80) {
    fetchMoreContent()
  }
}, 200)  // maksimal dipanggil sekali setiap 200ms

window.addEventListener('scroll', handleScroll)

// ANTI-PATTERN: Request tidak di-cancel saat unmount
function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null)

  useEffect(() => {
    fetchProduct(productId).then(data => {
      setProduct(data)  // ERROR: komponen mungkin sudah unmount!
    })
  }, [productId])

  return <div>{product?.name}</div>
}

// BENAR: Gunakan AbortController
function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null)

  useEffect(() => {
    const controller = new AbortController()

    fetch(`/api/products/${productId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => setProduct(data))
      .catch(err => {
        if (err.name !== 'AbortError') {
          // AbortError adalah expected — ignore
          // Error lain perlu di-handle
          console.error('Fetch failed:', err)
        }
      })

    // Cleanup: cancel request saat komponen unmount atau productId berubah
    return () => controller.abort()
  }, [productId])

  return <div>{product?.name}</div>
}

// Menggunakan React Query — AbortController sudah built-in
function ProductDetail({ productId }) {
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: ({ signal }) => fetchProduct(productId, { signal }),
    // React Query otomatis pass AbortSignal dan cancel saat query key berubah
  })

  return <div>{product?.name}</div>
}

// Contoh: like button dengan Optimistic UI
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked)
  const [count, setCount] = useState(initialCount)
  const [isLoading, setIsLoading] = useState(false)

  async function handleLike() {
    const wasLiked = liked

    // Optimistic update — ubah UI segera
    setLiked(!liked)
    setCount(liked ? count - 1 : count + 1)

    setIsLoading(true)
    try {
      await toggleLike(postId)
      // Berhasil — UI sudah benar (tidak perlu ubah apa-apa)
    } catch {
      // Gagal — revert ke state sebelumnya
      setLiked(wasLiked)
      setCount(initialCount)
      showToast('Gagal memperbarui. Coba lagi.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <button onClick={handleLike} disabled={isLoading}>
      {liked ? '❤️' : '🤍'} {count}
    </button>
  )
}

// 1. Polling — request berkala ke server
function usePolling(fetchFn, intervalMs) {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetchFn().then(setData)  // fetch pertama kali

    const interval = setInterval(() => {
      fetchFn().then(setData)
    }, intervalMs)

    return () => clearInterval(interval)  // cleanup
  }, [])

  return data
}

// Gunakan dengan backoff untuk mengurangi beban saat tab tidak aktif
function useSmartPolling(fetchFn) {
  useEffect(() => {
    let interval = 5000  // mulai dengan 5 detik

    function poll() {
      fetchFn()
      // Slow down polling saat tab tidak aktif
      interval = document.hidden ? 30000 : 5000
      timeoutId = setTimeout(poll, interval)
    }

    let timeoutId = setTimeout(poll, interval)
    return () => clearTimeout(timeoutId)
  }, [])
}

// 2. Server-Sent Events (SSE) — server push satu arah
function useServerSentEvents(url) {
  const [data, setData] = useState(null)

  useEffect(() => {
    const eventSource = new EventSource(url)

    eventSource.onmessage = (event) => {
      setData(JSON.parse(event.data))
    }

    eventSource.onerror = () => {
      // SSE otomatis reconnect saat koneksi putus
    }

    return () => eventSource.close()
  }, [url])

  return data
}

// 3. WebSocket — bidirectional real-time
// Cocok untuk: chat, collaborative editing, live game
// Lihat dokumentasi framework untuk implementasi yang lebih lengkap

// Pattern error handling yang komprehensif
function useDataWithRetry(fetchFn, maxRetries = 3) {
  const [state, setState] = useState({
    data: null,
    error: null,
    isLoading: true,
    retryCount: 0,
  })

  async function load(retryCount = 0) {
    setState(prev => ({ ...prev, isLoading: true, error: null }))

    try {
      const data = await fetchFn()
      setState({ data, error: null, isLoading: false, retryCount })
    } catch (err) {
      if (retryCount < maxRetries) {
        // Exponential backoff: 1s, 2s, 4s
        const delay = Math.pow(2, retryCount) * 1000
        setTimeout(() => load(retryCount + 1), delay)
      } else {
        setState({ data: null, error: err, isLoading: false, retryCount })
      }
    }
  }

  useEffect(() => { load() }, [])

  return { ...state, retry: () => load() }
}

// Penggunaan:
function ProductList() {
  const { data, error, isLoading, retry } = useDataWithRetry(fetchProducts)

  if (isLoading) return <ProductSkeleton />
  if (error) return (
    <div className="error-state">
      <p>Gagal memuat produk</p>
      <button onClick={retry}>Coba Lagi</button>
    </div>
  )

  return <Grid products={data} />
}

// ✗ Anti-pattern: fetch sequential padahal tidak ada dependency
async function loadPage() {
  const user = await fetchUser()
  const products = await fetchProducts()  // tidak butuh user, tapi menunggu!
  const categories = await fetchCategories()  // tidak butuh keduanya!
}

// ✓ Solusi: parallel ketika tidak ada dependency
const [user, products, categories] = await Promise.all([
  fetchUser(), fetchProducts(), fetchCategories()
])

// ✗ Anti-pattern: tidak ada feedback selama loading
function ProductList() {
  const [products, setProducts] = useState([])
  useEffect(() => {
    fetchProducts().then(setProducts)
    // Selama fetch: daftar kosong, user tidak tahu apa yang terjadi
  }, [])
  return <Grid products={products} />
}

// ✓ Solusi: loading, error, dan empty state yang bermakna
function ProductList() {
  const { data, isLoading, error } = useQuery(['products'], fetchProducts)

  if (isLoading) return <ProductSkeleton count={8} />
  if (error) return <ErrorState message="Gagal memuat" onRetry={refetch} />
  if (!data?.length) return <EmptyState message="Belum ada produk" />

  return <Grid products={data} />
}

// ✗ Anti-pattern: fetch di setiap scroll event
window.addEventListener('scroll', () => {
  fetchMoreIfNearBottom()  // bisa dipanggil ratusan kali per detik!
})

// ✓ Solusi: gunakan Intersection Observer atau throttle
const throttledHandler = throttle(fetchMoreIfNearBottom, 200)
window.addEventListener('scroll', throttledHandler)
// Atau lebih baik: gunakan Intersection Observer

// ✗ Anti-pattern: setState setelah unmount
useEffect(() => {
  fetchData().then(data => setData(data))  // komponen mungkin sudah unmount!
}, [])

// ✓ Solusi: AbortController atau React Query
useEffect(() => {
  const controller = new AbortController()
  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(e => { if (e.name !== 'AbortError') throw e })
  return () => controller.abort()
}, [])