UseEffect Chaining?

Just a reminder that if you have many steps to render a page (e.g. multiple useEffects to render data), you can factorize all the steps in a promise.

    const loadPage = async () => {
        return new Promise(async (resolve, reject) => {
            let quizData = await getQuiz()
            let quill = await loadQuill()
            resolve({ quizData, quill })
        })
            .then(async ({ quizData }) => {
                let answerSheet = generateAnswerSheet(quizData)
                return { answerSheet, quizData }
            })
            .then(async ({ answerSheet, quizData }) => {
                setAnswerSheet(answerSheet)
                setQuizData(quizData)
            })
            .then(() => {
                setQuizEnabled(true)
            })
            .catch((e) => {
                window.alert("failed to load:", e)
            })
    }