CODEWITHSUNDEEP
javascriptreactjs
Shreyas Abhyankar
Shreyas Abhyankar

Reputation: 13

How to fetch API as soon as page is loaded in React?

Whenever I visit a page it should automatically fetch the API

import React from 'react'

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

export default Component

Upvotes: 0

Views: 1093

Answers (6)

Ahmad
Ahmad

Reputation: 1489

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;

Upvotes: 0

Azzy
Azzy

Reputation: 1731

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

Upvotes: 0

Thery
Thery

Reputation: 31

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

Upvotes: 1

Zehan Khan
Zehan Khan

Reputation: 21

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;

Upvotes: 0

Shubham Yadav
Shubham Yadav

Reputation: 140

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

Upvotes: 2

Itay Elkouby
Itay Elkouby

Reputation: 355

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.

Upvotes: 2

Related Questions