Should I call a function that returns a promise immediately after setState or in the dependency array of useEffect()

My code (which seems to work ok) looks like this:

import { SplashScreen } from "@capacitor/splash-screen";

const MyComponent = () => {
  const [data, setData] = useState()

  useEffect(() => {
    init()
  }, [])

  const init = async () => {
    const response = await fetch("some_api")
    setData(response.data)
    await SplashScreen.hide()
  } 

  return (<div>{JSON.stringify(data)}<div>)
}

But I'm wondering if it's better practive to move the await SplashScreen.hide() function call to a useEffect() with the data in the dependency array like this:

import { SplashScreen } from "@capacitor/splash-screen";

const MyComponent = () => {
  const [data, setData] = useState()

  useEffect(() => {
    init()
  }, [])

  useEffect(() => {
    if (data) {
      await SplashScreen.hide()
    }
  }, [data])

  const init = async () => {
    const response = await fetch("some_api")
    setData(response.data)
  } 

  return (<div>{JSON.stringify(data)}<div>)
}

Note: SplashScreen.hide() returns a promise. Which way is better and why?