How can I render the components after useEffect hook is finished?

Question

I'm fetching data from an api, and I have a hook which stores the data. I want to render the components after the useEffect hook has fetched data and the data has been set to the data hook. How can I do it?

edit: I need the data before rendering the components.

export const App = () => {
  const [data, setData]

  useEffect(() => {
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  }, [])

  return (
    <div>
      <Home />
    </div>
  )
}

Answer 1

You can do like as below

export const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  }, [])

  return (
    <div>
      <Home setData={setData}/> //here you can pass data to the home component and play with the data
    </div>
  )
}

Answer 2

You can conditionally render a component based on a state. That way it only exists when the state is not null.

export const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  }, [])

  return (
    <div>
      {data ? <Home setData={setData}/> : null } // here you can pass data to the home component
    </div>
  )
}

Answer 3

You can add an if statement before the render to check if your data has not been loaded into the state yet, so, you can return null if you do not want the component to render.

export const App = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    axios.get("/data")
      .then((response) => setData(response.data))
      .catch((error) => console.log(error))
  }, [])

  if (data === null) return null

  return (
    <div>
      <Home />
    </div>
  )
}