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

Admin 1
Viewed 1729

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>
  )
}
axios react-hooks reactjs components javascript
3 Answers

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>
  )
}
user_8992710

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>
  )
}
user_39718430

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>
  )
}
user_113032920
Related