score:2

Accepted answer

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

Related Query

More Query from same tag