Asynchronous Content Loading #

// ANTI-PATTERN: Waterfall request — await berurutan
func loadDashboard() error {
    user, err := fetchUser()            // 300ms
    if err != nil {
        return err
    }
    orders, err := fetchOrders()        // 250ms (mulai setelah user selesai)
    if err != nil {
        return err
    }
    reco, err := fetchRecommendations() // 400ms (mulai setelah orders selesai)
    if err != nil {
        return err
    }
    // Total: 950ms
    return renderDashboard(user, orders, reco)
}

// BENAR: Parallel request — goroutine + WaitGroup
func loadDashboard() error {
    type payload struct {
        user, orders, reco any
    }
    var (
        wg  sync.WaitGroup
        res payload
    )
    wg.Add(3)
    go func() { defer wg.Done(); v, err := fetchUser(); if err == nil { res.user = v } }()            // semua dimulai bersamaan
    go func() { defer wg.Done(); v, err := fetchOrders(); if err == nil { res.orders = v } }()        // semua dimulai bersamaan
    go func() { defer wg.Done(); v, err := fetchRecommendations(); if err == nil { res.reco = v } }() // semua dimulai bersamaan
    wg.Wait()
    // Total: ~400ms (hanya menunggu yang terlama)
    return renderDashboard(res.user, res.orders, res.reco)
}

// LEBIH BAIK: padanan allSettled — tidak gagal karena satu request gagal
func loadDashboard() error {
    type result struct {
        value any
        ok    bool
    }
    results := make([]result, 3)

    var wg sync.WaitGroup
    wg.Add(3)
    go func() { defer wg.Done(); v, err := fetchUser(); results[0] = result{v, err == nil} }()
    go func() { defer wg.Done(); v, err := fetchOrders(); results[1] = result{v, err == nil} }()
    go func() { defer wg.Done(); v, err := fetchRecommendations(); results[2] = result{v, err == nil} }()
    wg.Wait()

    user := results[0]
    orders := results[1]
    reco := results[2]

    return renderDashboard(Payload{
        user:   user.value,
        orders: orDefault(orders),
        reco:   orDefault(reco),
        // Render dengan data yang tersedia, meski sebagian gagal
    })
}

// Helper: kembalikan value saat ok, selain itu default yang masuk akal
func orDefault(r result) any {
    if !r.ok {
        return []any{}
    }
    return r.value
}

// ANTI-PATTERN: Scroll event untuk lazy load (sangat boros)
func onScroll() {
    for _, el := range document.QuerySelectorAll("[data-lazy]") {
        rect := el.GetBoundingClientRect()
        if rect.Top < window.InnerHeight() {
            loadContent(el) // getBoundingClientRect dipanggil SETIAP SCROLL EVENT!
        }
    }
}
window.AddEventListener("scroll", onScroll)
// Setiap scroll event = layout recalculation = jank!

// BENAR: Intersection Observer — browser yang handle deteksinya
var observer *IntersectionObserver
observer = newIntersectionObserver(func(entries []IntersectionEntry) {
    for _, entry := range entries {
        if entry.IsIntersecting {
            loadContent(entry.Target)
            observer.Unobserve(entry.Target) // berhenti observasi setelah dimuat
        }
    }
}, ObserverOptions{
    RootMargin: "200px", // mulai load 200px sebelum masuk viewport
    Threshold:  0,       // trigger saat pixel pertama masuk viewport
})

// Attach ke semua elemen yang perlu lazy load
for _, el := range document.QuerySelectorAll("[data-lazy]") {
    observer.Observe(el)
}

// React Hook untuk lazy loading dengan Intersection Observer
// (React hooks adalah framework API — ini menunjukkan logika browser yang setara)

type LazyLoad struct {
    ref       *Element
    isVisible bool
}

func UseLazyLoad(options ObserverOptions) (*LazyLoad, func()) {
    ll := &LazyLoad{ref: &Element{}}

    var observer *IntersectionObserver
    observer = newIntersectionObserver(func(entries []IntersectionEntry) {
        for _, entry := range entries {
            if entry.IsIntersecting {
                ll.isVisible = true
                observer.Unobserve(ll.ref) // hanya perlu trigger sekali
            }
        }
    }, options)

    observer.Observe(ll.ref)
    // Cleanup: berhenti observasi saat komponen unmount
    return ll, func() { observer.Unobserve(ll.ref) }
}

// Penggunaan:
func ProductComments(productID string) *Element {
    ll, _ := UseLazyLoad(ObserverOptions{RootMargin: "200px"})

    if ll.isVisible {
        return renderCommentsSection(productID)
    }
    return renderCommentsSkeleton()
}
// Comments hanya di-fetch saat user scroll mendekati section ini

// Implementasi Infinite Scroll dengan Intersection Observer
// (state dan hooks React ditampilkan sebagai struct state biasa — padanan framework)
type InfiniteProductListState struct {
    products  []Product
    page      int
    hasMore   bool
    isLoading bool
    loadMore  *Element // sentinel element
}

// Trigger fetch saat "sentinel" element masuk viewport
func (s *InfiniteProductListState) setupObserver() {
    observer := newIntersectionObserver(func(entries []IntersectionEntry) {
        for _, entry := range entries {
            if entry.IsIntersecting && s.hasMore && !s.isLoading {
                s.page++ // setPage(p => p + 1)
            }
        }
    }, ObserverOptions{RootMargin: "300px"}) // mulai fetch 300px sebelum bottom

    observer.Observe(s.loadMore)
    // cleanup saat unmount: observer.Disconnect()
}

// Fetch saat page berubah
func (s *InfiniteProductListState) loadPage() {
    if s.page == 1 && len(s.products) > 0 {
        return
    }

    s.isLoading = true
    go func() {
        newProducts := fetchProducts(s.page)
        s.products = append(s.products, newProducts...)
        s.hasMore = len(newProducts) == 20 // ada lebih banyak jika dapat 20 item
        s.isLoading = false
    }()
}

func (s *InfiniteProductListState) render() *Element {
    return renderFragment(
        renderProductGrid(s.products),
        // Sentinel element — ketika ini masuk viewport, trigger fetch
        s.loadMore,
        s.isLoading && renderLoadingSpinner(),
        !s.hasMore && renderParagraph("Semua produk sudah ditampilkan"),
    )
}

// Debounce: tunggu user berhenti sebelum eksekusi
// Ideal untuk: search input, form auto-save
type Debounce struct {
    timer *time.Timer
    value string
}

func (d *Debounce) Update(value string, delay time.Duration) {
    if d.timer != nil {
        d.timer.Stop() // reset timer setiap value berubah
    }
    d.timer = time.AfterFunc(delay, func() {
        d.value = value // setDebouncedValue(value)
    })
}

func (d *Debounce) Value() string { return d.value }

// Penggunaan untuk search:
func searchBar() {
    query := ""
    debounced := &Debounce{}
    debounced.Update(query, 300*time.Millisecond) // tunggu 300ms setelah user stop typing

    // Padanan useQuery — fetch hanya jika minimal 3 karakter
    var results []Product
    if len(debounced.Value()) > 2 {
        results = searchProducts(debounced.Value())
    }

    // Render: input terikat ke query + daftar hasil
    renderSearchInput(query, func(newQuery string) { query = newQuery })
    renderSearchResults(results)
}

// Throttle: batasi frekuensi eksekusi
// Ideal untuk: scroll position tracking, resize handler, mouse move
func throttle(fn func(), limitMs int64) func() {
    lastCall := int64(0)
    return func() {
        now := time.Now().UnixMilli()
        if now-lastCall >= limitMs {
            lastCall = now
            fn()
        }
    }
}

// Throttle scroll position untuk fetch konten
handleScroll := throttle(func() {
    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
func ProductDetail(productID string) {
    product, err := fetchProduct(productID)
    if err == nil {
        renderProduct(product) // ERROR: komponen mungkin sudah unmount!
    }
}

// BENAR: Gunakan context cancellation (padanan Go dari AbortController)
func ProductDetail(productID string) {
    ctx, cancel := context.WithCancel(context.Background())
    defer cancel() // Cleanup: cancel request saat komponen unmount atau productId berubah

    product, err := fetchProduct(ctx, productID)
    if err != nil {
        if !errors.Is(err, context.Canceled) {
            // AbortError adalah expected — ignore
            // Error lain perlu di-handle
            log.Error("Fetch failed:", err)
        }
        return
    }
    renderProduct(product)
}

// Menggunakan React Query — AbortController sudah built-in
func ProductDetail(productID string) {
    // Padanan React Query: cache dengan key ['product', productID],
    // otomatis pass AbortSignal dan cancel saat query key berubah
    product := useQuery("product", productID, func(ctx context.Context) (*Product, error) {
        return fetchProduct(ctx, productID)
    })
    renderProduct(product)
}

// Contoh: like button dengan Optimistic UI
type LikeButtonState struct {
    postID       string
    liked        bool
    count        int
    initialCount int
    isLoading    bool
}

func (s *LikeButtonState) HandleLike() {
    wasLiked := s.liked

    // Optimistic update — ubah UI segera
    s.liked = !s.liked
    if wasLiked {
        s.count--
    } else {
        s.count++
    }

    s.isLoading = true
    if err := toggleLike(s.postID); err != nil {
        // Gagal — revert ke state sebelumnya
        s.liked = wasLiked
        s.count = s.initialCount
        showToast("Gagal memperbarui. Coba lagi.")
    }
    // Berhasil — UI sudah benar (tidak perlu ubah apa-apa)
    s.isLoading = false
}

// Render: button dengan ❤️/🤍 + count, disabled saat loading
func (s *LikeButtonState) render() *Element {
    heart := "🤍"
    if s.liked {
        heart = "❤️"
    }
    return renderButton(heart+" "+strconv.Itoa(s.count), s.isLoading, s.HandleLike)
}

// 1. Polling — request berkala ke server
func usePolling(fetchFn func() ([]byte, error), interval time.Duration) []byte {
    var data []byte

    data, _ = fetchFn() // fetch pertama kali

    ticker := time.NewTicker(interval)
    go func() {
        for range ticker.C {
            data, _ = fetchFn()
        }
    }()

    // Cleanup: ticker.Stop() saat komponen unmount
    return data
}

// Gunakan dengan backoff untuk mengurangi beban saat tab tidak aktif
func useSmartPolling(fetchFn func()) {
    interval := 5 * time.Second // mulai dengan 5 detik

    var poll func()
    poll = func() {
        fetchFn()
        // Slow down polling saat tab tidak aktif
        if document.Hidden {
            interval = 30 * time.Second
        } else {
            interval = 5 * time.Second
        }
        time.AfterFunc(interval, poll)
    }
    time.AfterFunc(interval, poll)
}

// 2. Server-Sent Events (SSE) — server push satu arah
func useServerSentEvents(url string) []byte {
    var data []byte
    eventSource := newEventSource(url)

    eventSource.OnMessage = func(event Event) {
        data = json.Unmarshal(event.Data) // setData(JSON.parse(...))
    }

    eventSource.OnError = func() {
        // SSE otomatis reconnect saat koneksi putus
    }

    // Cleanup: eventSource.Close() saat komponen unmount
    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
type DataState struct {
    data       any
    err        error
    isLoading  bool
    retryCount int
}

func useDataWithRetry(fetchFn func() (any, error), maxRetries int) (DataState, func()) {
    state := DataState{isLoading: true}

    var load func(retryCount int)
    load = func(retryCount int) {
        state.isLoading = true
        state.err = nil

        data, err := fetchFn()
        if err != nil {
            if retryCount < maxRetries {
                // Exponential backoff: 1s, 2s, 4s
                delay := time.Duration(math.Pow(2, float64(retryCount))) * time.Second
                time.AfterFunc(delay, func() { load(retryCount + 1) })
            } else {
                state.data = nil
                state.err = err
                state.isLoading = false
                state.retryCount = retryCount
            }
            return
        }
        state.data = data
        state.err = nil
        state.isLoading = false
        state.retryCount = retryCount
    }

    load(0) // load awal
    return state, func() { load(0) } // retry
}

// Penggunaan:
func ProductList() *Element {
    state, retry := useDataWithRetry(fetchProducts, 3)

    if state.isLoading {
        return renderProductSkeleton()
    }
    if state.err != nil {
        return renderErrorState("Gagal memuat produk", retry)
    }
    return renderGrid(state.data)
}

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

// ✓ Solusi: parallel ketika tidak ada dependency
func loadPage() {
    var (
        wg         sync.WaitGroup
        user       any
        products   any
        categories any
    )
    wg.Add(3)
    go func() { defer wg.Done(); user, _ = fetchUser() }()
    go func() { defer wg.Done(); products, _ = fetchProducts() }()
    go func() { defer wg.Done(); categories, _ = fetchCategories() }()
    wg.Wait()
}

// ✗ Anti-pattern: tidak ada feedback selama loading
func ProductList() *Element {
    products := fetchProducts()
    // Selama fetch: daftar kosong, user tidak tahu apa yang terjadi
    return renderGrid(products)
}

// ✓ Solusi: loading, error, dan empty state yang bermakna
func ProductList() *Element {
    // Padanan useQuery: cache dengan key ['products']
    data, isLoading, err := useQuery("products", fetchProducts)

    if isLoading {
        return renderProductSkeleton(8)
    }
    if err != nil {
        return renderErrorState("Gagal memuat", func() { /* refetch */ })
    }
    if len(data) == 0 {
        return renderEmptyState("Belum ada produk")
    }

    return renderGrid(data)
}

// ✗ Anti-pattern: fetch di setiap scroll event
window.AddEventListener("scroll", func() {
    fetchMoreIfNearBottom() // bisa dipanggil ratusan kali per detik!
})

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

// ✗ Anti-pattern: setState setelah unmount
func load() {
    data, _ := fetchData() // komponen mungkin sudah unmount!
    setData(data)
}

// ✓ Solusi: context cancellation (padanan AbortController)
func load() error {
    ctx, cancel := context.WithCancel(context.Background())
    defer cancel() // cleanup saat unmount

    resp, err := fetch(ctx, "/api/data")
    if err != nil {
        if errors.Is(err, context.Canceled) {
            return nil // AbortError adalah expected — ignore
        }
        return err // error lain diteruskan
    }
    setData(resp.JSON())
    return nil
}