ReactJS - async function in useEffect doesn't wait under any condition

Question

I have searched through possible solutions quite a bit and can't find any mistake that applies in this case. The await used inside useEffect just doesn't wait.

App.js: the data state is set only through default value and nowhere else

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

  useEffect(()=>{
    async function loadData() {
      await data.load();
    }
    loadData().then(()=>{ console.log('Loaded!') });
  }, [data])

data.js is ES6 class that has async method load():

async load() {
        let test = await fetch("https://raw.githubusercontent.com/json-iterator/test-data/master/large-file.json");
        let testJson = await test.json();
    }

Whatever I try, the .then() is triggered within a split second, while opening the same json file in browser takes a long time.

Things I tried:

Using null as default state and instead initializing on mount useEffect( ()=>{setData( new Data() )}, [] ) (while adding check at top of data's useEffect to return if data is null)
IIFE function inside data's useEffect using just await instead of then
There are no fetching related warnings or errors in console, still I tried with just setTimeout instead
Few other probably pointless things.. I can't figure out what is wrong here.

CertainPerformance · Accepted Answer · 2021-04-12 01:19:06Z

I'm pretty sure your code is working properly, you're just being confused at the caching behavior and the browser display behavior.

Your load method fetches the data properly. It does not throw an error. Then the loadData function properly chains that Promise with the caller, and the caller's .then is chained properly too.

Loaded is logged near-immediately because the request doesn't take long to finish at all - and this occurs because, if you've fetched that particular endpoint before, it will return a locally cached version.

If you clear the cache, or press the "Disable cache" button in the developer tools, you should see the request take multiple seconds to resolve.

while opening the same json file in browser takes a long time.

This is because rendering that much content is expensive. It isn't necessarily downloading the data over the network - if it's only rendering the data from the disk cache, which it should, the problem is that formatting, displaying, paginating, and painting so much text takes a while to finish.

If you change this:

async load() {
        let test = await fetch("https://raw.githubusercontent.com/json-iterator/test-data/master/large-file.json");
        let testJson = await test.json();
    }

to do something else once the request finishes - such as trigger a state change and do more stuff with the data - you should see things working properly.

Santosh Mahto · Accepted Answer · 2021-04-12 02:13:20Z

1

I have check async behaviour of your code ...

useEffect(()=>(async () => {
    console.warn("1:- ", new Date());
    const resp = await fetch(
      "https://raw.githubusercontent.com/json-iterator/test-data/master/large-file.json"
    );
    const json = await resp.json();
    console.log(json);
    console.warn("3:- ", new Date());
  })(), []);

Disable the catching from network tab
simulate network type as a slow 3G o see the result

edited Apr 12, 2021 at 2:13

answered Apr 12, 2021 at 1:57

Santosh Mahto

91 silver badge5 bronze badges

Collectives™ on Stack Overflow

ReactJS - async function in useEffect doesn't wait under any condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related