[Solved]-Getting error "Cannot update a component while rendering a different component". What is the correct way to achieve what I'm attempting?-Reactjs

If the interviews are fetched asynchronously within Query, an easy fix might be:

• introduce a new callback prop onInterviewsReady to the Query component
• let Query call this callback in an effect (useEffect) as soon as the interviews are ready
  • not using an effect would still cause a foreign component's state to change while rendering Query, which yields the warning
• implement the callback by the hosting component HomePage with a function like const onInterviewsReady = interviews => setPreLaunch(interviews.length < 1); and pass it to Query
• if you face unnecessary re-renders, you might want to ensure your callback reference is stable by modifying either
  • the host component (HomePage): wrap your callback definition in useCallback before passing it to the consuming component
  • the consuming component (Query): wrap your passed callback prop in useRef and call the ref's current value in the effect instead of the prop's value