Smooth Data Appending in Virtual Scroll Grid with Background Fetching in React

[Goutham]

Description:

I am working on a React + TypeScript project where I am using Syncfusion Grid with Virtual Scroll. My data is fetched from an API using RTK Query, and I am fetching records in batches of 100 at a time until I get all records in asynchronous background process and storing it in store.

Problem:

Each time new API data is fetched, the grid re-renders, causing a noticeable glitch. I want to append new records in the background without affecting the current grid rendering.

Current Approach:

• Using RTK Query to fetch contacts from an API.
• Fetching 100 records per request and continuing until I receive all records in background and storing them in store.
• Syncfusion Grid uses enableVirtualization.
• Each time new records arrive, the grid seems to reload, causing a UI flicker/glitch.

Expected Behavior:

• The new records should be appended smoothly in the background.
• The grid should not flicker or re-render unnecessarily while data is being fetched.

Question:

• How can I append new records into Syncfusion Grid without re-rendering the existing ones?

Environment Details:

• Framework: React (TypeScript)
• State Management: Redux Toolkit Query (RTK Query)
• Grid Component: Syncfusion Grid with Virtual Scroll

[Goutham]

Hi,
could you please reply for my question? or do you suggest any workaround solution?

[Sivaranjani Rajasekaran]

Hi Goutham,

 

We sincerely apologize for the inconvenience caused.

 

We have analyzed your query regarding the flickering issue when appending new data in the Syncfusion Grid with Virtual Scroll using RTK Query, we attempted to replicate the issue in a React application using Redux and TypeScript with virtual scrolling enabled. During our testing, the API was triggered upon scrolling, fetching the next set of records, which were correctly bound to the grid without any glitches.

 

We suspect that each time dispatch updates the state, React triggers a component re-render, which may be causing the issue. To avoid unnecessary re-renders and optimize performance, you can use useMemo to memoize the Grid component. This will prevent redundant re-renders and enhance performance.

 

To avoid unnecessary re-renders and ensure smooth data appending:

• Use useMemo to Memoize the Grid Component – This prevents unnecessary re-renders when the data state changes.

• Optimize Data Fetching Strategy – Ensure that only new records are appended without modifying the reference of existing data.

• Handle Virtual Scroll Efficiently – Syncfusion’s virtual scroll loads data only when required. Managing skip and take parameters efficiently ensures a seamless user experience.

We have attached a video demo for your reference. Kindly review them once.

 

Code Implementation: 

 

1. Memoizing the Grid Component : The useMemo hook is effectively used to memoize the grid component, ensuring that it only re-renders when the gridData changes, thus optimizing performance.

 

 

Code Example : 

 

const MemoGrid = useMemo(() => (

  <GridComponent

    ref={(grid: any) => (gridInstance = grid)}

    height={200}

    dataSource={{ result: gridData.result || [], count: gridData.count || 0 }}

    allowSorting={true}

    enableVirtualization={true}

    pageSettings={pageSettings}

    dataStateChange={dataStateChange.bind(this)}>

    <ColumnsDirective>

    .         .          .           .              .           .

    </ColumnsDirective>

    <Inject services={[Page, Sort, Filter, Edit, Toolbar, VirtualScroll]} />

  </GridComponent>

), [gridData]);

 

The memoization helps in ensuring the grid component is only affected by changes in the gridData, preventing unrelated state changes in the application from triggering unnecessary re-renders of the grid.

2.Handling Pagination & Data Fetching Efficiently 

 

 

Initial Data Fetching:

 

useEffect(() => {

    dispatch<any>(getData(generateParams(currentPagination)));

  }, [currentPagination]);

 

Generating API Query Parameters:

 

const generateParams : any = (pagData:any) => {

  let params = ``;

  if (pagData) {

    const pageQuery = `$skip=${pagData.skip}&$top=${pagData.take}`;

    let sortQuery = '';

    if ((pagData.sorted || []).length) {

      sortQuery =

        `&$orderby=` +

        pagData.sorted

          .map((obj:any) => {

            return obj.direction.toLowerCase() === 'descending'

              ? `${obj.name} desc`

              : obj.name;

          })

          .reverse()

          .join(',');

    }

    params = `${params.length > 0 ? `${params}&` : ""}${pageQuery}${sortQuery}&$count=true`;

  }

 

3. Handling Grid Virtual Scroll Events

 

const dataStateChange = (args: DataStateChangeEventArgs) => {

 

  if (args.action?.requestType === "paging" || args.action?.requestType === "virtualscroll") {

    const newPagination = { skip: args.skip, take: args.take };

    dispatch(setPaginationData(newPagination));  

  }

};

 

Ensures only the required data is fetched from the API without unnecessary updates

Video Demo : 

Sample : Please find the sample attached.

 

Documentation Link : 

1. Redux Data Binding in Grid : https://ej2.syncfusion.com/react/documentation/grid/data-binding/redux-service

2. Performance Optimization in React Grid : Performance tips for React Grid Component | Syncfusion
3. Virtual scrolling : https://ej2.syncfusion.com/react/documentation/grid/scrolling/virtual-scrolling
   

Further Assistance: 

If you continue to experience issues, please provide the following details:

1.  Share your complete grid rendering and Redux handling code to identify potential problems

2. Provide a reproducible sample or try reproducing the issue in our provided sample.

 

Once we have this information, we will provide a prompt solution.

 

Regards,

Sivaranjani R.

Attachment: DataGridReactReduxTS_5cf3e2e0.zip