Avoid blocking UI rendering while api fetching data, React

Question

I am working on React app which fetches large data (Thousands of records) and then render it. Until api is fetching data, UI keep blocked and does not display anything. I am creating chunks in size of 10 for fetching api using Promise.allSettled and combining them all.

useEffect(() => {
    fetchBatchedData()
 },[])

fetchBatchedData is an async function and sets data in redux store only, I don`t need that data in UI at loading time. Until I get all the data, UI display nothing. How can I fetch data in background without blocking component rendering?

Have you tried webworker for async fetch?

Vishnu
– Vishnu

2022-10-07 06:21:35 +00:00
Commented Oct 7, 2022 at 6:21 — Vishnu
– Vishnu, Commented Oct 7, 2022 at 6:21

RedEnum · Accepted Answer · 2022-10-07 06:13:58Z

1

You could use a useState like this:

const [data, setData] = useState();

useEffect(() => {
    const loadData = () => {
        const tempData = fetchBatchedData();
        setData(tempData)
    }
 },[])

if(!data){
  return(
    <h1>Loading...</h1>
  )
} else {
  return(
    <h1>Got the data!</h1>
  )
}

answered Oct 7, 2022 at 6:13

RedEnum

1626 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashwani Panwar Over a year ago

No this is not the issue. Issue is render blocking not the displaying.

frostzt · Accepted Answer · 2022-10-07 06:28:10Z

1

Maybe we can defer rendering the data? There is something called requestIdleCallback here.

Something like this maybe?

import { useState, useEffect } from 'react';

function RenderDeferred({ children, timeout }) {
  const [render, setRender] = useState(false);

  useEffect(() => {
    if (render) setRender(false);
    const id = requestIdleCallback(() => setRender(true), { timeout: idleTimeout });

    return () => cancelIdleCallback(id);
   }, [idleTimeout]);

  if (!render) return null;

  return children;
}

And then use it like this:

<RenderDeferred timeout={3000}>
    <YourComponent />
</RenderDeferred>

answered Oct 7, 2022 at 6:28

frostzt

4195 silver badges14 bronze badges

Collectives™ on Stack Overflow

Avoid blocking UI rendering while api fetching data, React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related