Access custom hook after conditions - reactjs

Question

I'm making a Quiz app with react and typescript.
I have created a quiz context provider to wrap the functionality and pass it to the children.
The value inside my quiz provider is presented with a custom hook called useQuiz that handles all of my game logic - receives (category from url-params, questions from the backend) and returns useful data and methods to play it effectively.
Unfortunately, because of my pre-made custom hook, I can't wait for the questions data to fetch and render {children} as a result. When I'll add conditions to my jsx (for instance, display standby screen while waiting), react rules of hooks will be broken.
However, if I would write useQuiz logic inside the provider, it will fix my problem. but the structure might be messy for reading.
In my code example, react first render the page with questions marked as undefined. To overcome the error, I have added questionsJson file to be the default questions before fetching (just for demonstration purposes).
I'd like some help to still use useQuiz in my context provider and render a loading page, without breaking react rules. Alternatively, I would be glad to hear other suggestions or patterns.
Down below I added the code referenced to my explanation.
Any help will be appreciated :)
QuizProvider :
import { createContext, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Question, Provider } from '../types';
import useQuiz from '../hooks/useQuiz';
import questionsJson from '../lib/questions.json';
import useFetch from '../hooks/useFetch';
export const QuizContext = createContext({} as ReturnType<typeof useQuiz>);
export default function _QuizProvider({ children }: Provider) {
const { pathname } = useLocation();
const { category } = useParams();
const { fetchData: fetchQuestions, data: questions, loading, error } = useFetch<Question[]>();
useEffect(() => {
fetchQuestions(`${pathname}/questions`, 'GET');
} , []);
return (
<QuizContext.Provider value={useQuiz({ category: category!, questions: questions || questionsJson.geography })}>
{children}
</QuizContext.Provider>
);
}
EDIT
useQuiz :
import { useState } from 'react';
import { Answer, Quiz, useQuiz } from '../types';
export default function _useQuiz({ category, questions }: useQuiz): Quiz {
const QUESTIONS_TIMER = 10 * 60;
const [questionNo, setQuestionNo] = useState(1);
const [answers, setAnswers] = useState(new Array<Answer>(questions.length));
const [finish, setFinish] = useState(false);
return {
category,
questions,
timer: QUESTIONS_TIMER,
questionNo,
totalQuestions: questions.length,
currentQuestion: questions[questionNo - 1],
finish,
nextQuestion: () => setQuestionNo(questionNo + 1),
previousQuestion: () => setQuestionNo(questionNo - 1),
toggleQuestion: (index: number) => setQuestionNo(index),
onAnswer: (answer: Answer) => {
const newAnswers = [...answers];
newAnswers[questionNo - 1] = answer;
setAnswers(newAnswers);
},
isSelected: (answer: Answer) =>
JSON.stringify(answers[questionNo - 1]) === JSON.stringify(answer),
isAnswersMarked: () =>
answers.every(answer => answer !== undefined),
finishQuiz: () => setFinish(true),
score: () =>
answers.filter(answer => answer && answer.correct).length
};
}

Answer 1

I realize that my structure is illegal.
I tried to render a custom hook after several condition which breaks react rules.
So, there are two pattern that could solve my issue:
Replacing the custom hook with a component.
Replacing the custom hook with a reducer function. That’s a perfect fit for me.
I hope it’ll help you :)