title: What's the best practice with React hooks if I need to do some stateful orchestration?
body: <p>I have 2 different components that need to do the same kind of orchestration:</p>
  
  <pre><code>    useEffect(() =&gt; {
          async function fetchData() {
              if (route.params['id']) {
                  const resConversation = await axios(`...`)
                  setConversationState({ ...conversationState, currentConversation: resConversation.data })
  
                  const resParticipants = await axios(`...`)
                  setParticipants(resParticipants.data)
  
                  const resStream = await axios(`somestuff`)
                  setAudioState({ ...audioState, ...resStream })
              }
          }
  
          fetchData()
  
      }, [])
  </code></pre>
  
  <p>The <code>setAudioState</code> and <code>setConversationState</code> are from <code>useContext</code>.</p>
  
  <p>What's the best way for me to do this and keep my code DRY?</p>
  
  <p>I thought about a custom <code>useGetConversation</code> hook, but I can only call that inside my component function body. Is there a better way?</p>