How should I initialize App with fetch?

Currently I’m working on the quote generator project and I’m having difficulty with regards to how I should structure the initialization of App that uses fetch() to retrieve and store quotes.

fetch() is asynchronous by nature so I’m trying to figure out how to retrieve the quotes from an API before the components render?

function App() {
    const quotes_ref = useRef(null);
    (
        async () => {
            const quotes = await fetch_quotes();
            quotes_ref.current = quotes;
        }
    )()
    return <>
        <QuoteGenerator ref={ quotes_ref.current } quote={generate_quote(quotes_ref.current)} />
    </>
}
const QuoteGenerator = forwardRef(function QuoteGenerator({ quote }, ref) {

    let [current_quote, setQuote] = useState(quote);
    let quote_text_ref = useRef(null);
    let stored_quotes = ref;

    return <>
        <div className="wrapper">
            <div id="quote-box">
                <Quote ref={ quote_text_ref } quote={ current_quote } />
                <div className="button_controls">
                    <a href=""><img src="/logo-black.png" /></a>
                    <button type="button" id="new_quote" aria-label="View a new quote">New Quote</button>
                </div>
            </div>
        </div>
    </>
});

It is usually done inside a handler or an useEffect

In doing that the QuoteGenerator component wants to render first and then useEffect is called. I didn’t use useEffect because of this behavior as the component is mounted first as presented by console.log statements:

render QuoteGenerator
render QuoteGenerator
Quotes now received...
function App() {
    const quotes_ref = useRef(null);
    useEffect(() => {
        (
            async () => {
                const quotes = await fetch_quotes();
                console.log("Quotes received...);
                quotes_ref.current = quotes;
            }
        )()
    }, []);
    console.log(`render QuoteGenerator`);
    
    return <>
        <QuoteGenerator ref={ quotes_ref.current } quote={generate_quote(quotes_ref.current)} />
    </>
}

That is how it works yes. And it runs twice in Strict Mode.

I would suggest you use a state variable and not a ref for the API response.