How to fetch api as soon as page is loaded in ReactJS?-CodePudding

Whenever i visit a page it should automatically fetch the api

import React from 'react'

const comp = () => {
fetch("api url").then((res)=>console.log(res))
  return (
    <div>comp</div>
  )
}

export default comp

CodePudding user response：

use the useEffect for this. The useEffect method will execute the passed callback on the mount of the component and on every time one of the dependency array parameters is changed. therefore:

const Comp = () => {

  useEffect(() => {
    fetch("api url").then((res)=>console.log(res))
  }, []);

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

Will make the callback to fire only once (because the empty dependency array) on the component mount.

CodePudding user response：

It is very simple using react hook use effect please learn basics of useffect hook on react docs or any youtube tutorial and as for the answer

import React, { useEffect } from 'react'

const comp = () => {
useEffect(() => {
    fetch("api url").then((res)=>console.log(res))
}, [])


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

export default comp

here empty dependency means every time page loads only once

CodePudding user response：

import React, { useState, useEffect } from 'react'

const Comp = () => {

const [ data, setData ] = useState([]);

const getData = async () => {
    const res = await fetch("api url");
    const data = await res.json();
    setData(data)
}  

useEffect(()=>{ getData() },[]);

  return (
    <>
    <div>comp</div>
    // dispaly your data here from data state 
    </>
  )
}

export default Comp;

CodePudding user response：

You should use the useEffect Hook in your principal component like app.js

import React, {useEffect} from 'react'


  useEffect(() => {

    fetch("api url").then((res)=>console.log(res))

  }, []);

Be careful, this manipulation can consume a lot of resources (a lot of data to fetch etc.) Thery

CodePudding user response：

Fetch and use data with useState

const initialValue = {};

const comp = () => {

 const [data, setData] = useState(initialValue);

 useEffect(() => {

   let ignore = false;
 
   const fetchData = async () => {
         const res = fetch("api url");
         if (ignore) { return; }
         setData(res.json())

         return () => {
            ignore = true;
         }
   }

 , [])


  return (
    <div>comp {data.prop}</div>
  )
}

More on working with state More about useEffect life cycle

Hope it helps

CodePudding user response：

You don't need to use the API function like this, it will be called continuously, you need to use useEffect hook, when your component reloads useEffect will be called, and you can learn about the useEffect dependency here,

import React, { useEffect, useState } from 'react'

const comp = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("api url").then((res)=> {
      console.log(res)
      setData(res)
    } )
  }, [])


  return (
    // use data state to show the data here
    <div>comp</div>
  )
}

export default comp;