A page on the docs site to show how to create a hook that loads data form an external source such that there would be no gap

Let's say I want to create a hook called useSettings. This hook will load settings once from an API and cache the data.

This is a sample code:

import {
    useEffect,
    useState,
} from "react"

let cache

const useSettings = () => {

    const [settings, setSettings] = useState(cache || [])

    useEffect(() => {
        if (cache) return
        callApi("/settings")
            .then(data => {
                setSettings(data)
                cache = data
            })
    }, [])

    const getSetting = (key, fallback) => {
        const setting = settings.find(i => i.key === key)
        if (!settings) {
            return fallback
        }
        return setting.value
    }

    return {
        getSetting
    }
}

export default useSettings

This works fine when the settings are loaded. But when a component uses this hook, there is an unpredictable time at the beginning when the settings are not loaded yet, and they get the fallback value.

I searched the docs and navigated the menu items. I could not find a page as a guide on how to remove that gap.

Please add a page for this purpose. Explain what is the react's official way to solve this problem. Explain how we can make sure that when we call a hook, we are guaranteed to get the data.

Bắt đầu bằng cách xem lại tài liệu React hiện có và ví dụ useSettings trong issue để xác định phần hướng dẫn về việc tải dữ liệu bên ngoài nên được đặt ở đâu. Trang hoàn chỉnh cần giải thích phương pháp chính thức để tránh tình trạng thiếu dữ liệu ban đầu và cách một hook có thể đảm bảo dữ liệu khả dụng trước khi các consumer sử dụng dữ liệu đó.