title: useEffect with async function to play sound not working
body: <p>I am trying to play background music in a React Native/Expo app as soon as the homeScreen loads. </p>
  
  <p>Using expo AV library, I set up a MusicContext with a method to start the music. Here is my MusicContext.js</p>
  
  <pre><code>import React, {
    useState,
    useCallback,
    useMemo,
    useContext,
    useEffect,
  } from "react"
  import PropTypes from "prop-types"
  import { Audio } from "expo-av"
  
  const initialState = {
    playMusic: false,
    setPlayMusic: () =&gt; null,
  }
  
  export const MusicContext = React.createContext(initialState)
  
  const startMusic = async () =&gt; {
    let mainTheme = null
  
    if (!mainTheme) {
      mainTheme = new Audio.Sound() 
    try {
      console.log("trying")
      await mainTheme.loadAsync(require("../assets/sounds/MainTheme.mp3"))
      mainTheme.setStatusAsync({ isLooping: true })
    } catch (error) {
      console.log("Couldnt load main theme")
      return
    }
  }
  }
  
  export const MusicProvider = props =&gt; {
    const [playMusic, setPlayMusic] = useState(initialState.playMusic)
  
    return (
      &lt;MusicContext.Provider
        value={{
          playMusic,
          setPlayMusic,
          startMusic,
        }}
      &gt;
        {props.children}
      &lt;/MusicContext.Provider&gt;
    )
  }
  
  MusicContext.propTypes = {
    children: PropTypes.node.isRequired,
  }
  </code></pre>
  
  <p>I then call the the <code>startMusic</code> method in <code>useEffect</code> on my home screen. </p>
  
  <pre><code>const HomeScreen = () =&gt; {
    const { startMusic } = useContext(MusicContext)
  
    useEffect(() =&gt; {
      console.log("running")
      startMusic()
    }, []) 
  </code></pre>
  
  <p>I see all of the console.log output so I know it is running, but the music never plays. What am I missing here?</p>