How to Load millions record in React

I will show you how you can load 1 million records in Reactjs .How to Load millions record in React

In this blog post, we are going to discuss how to load more than a million records in less than a second in ReactJS.I will use JSON Server as a database you can use MYSQL or MongoDB.Please read more about JSON Server https://www.npmjs.com/package/json-server.

Please download JSON Server from the link and paste anywhere on your computer and start JSON Server. You can get 1 million JSON Records from my file.

Always start JSON Server before running the Reactjs project . By default JSON Server will run on PORT 3000. You can start JSON Server by executing this line of code in cmd ( Root Folder of JSON Server ).

JSON Server Start in cmd : json-server –watch db.json

db.json ( I am showing here only 2 records but in my file there are 100000+ Records )

[
  {
    "id": "1",
    "FirstName": "Jibrale",
    "LastName": "Singh",
    "Email": "dyssaqengg@gmail.com",
    "Birthdate": "1990-02-16"
  },
  {
    "id": "2",
    "FirstName": "Mauau",
    "LastName": "Singh",
    "Email": "a@gmaii.com",
    "Birthdate": "1982-02-02"
  },

Now create a file named RecordsFetch.js in src folder of React.

RecordsFetch.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React, {useState,useEffect} from 'react';
import axios from 'axios';

function RecordsFetch() {
    const [users, setUsers] = useState([]);
    
    const getUsers = async () => { 

	  const result = await axios.get("http://localhost:3000/products");
      setUsers(result.data.reverse());
     } 

    useEffect(() => {
      getUsers();
    }, []);
    
    return (
         <div className="container">
           <h3 className="text-center text-success mb-5 mt-4">Fetching 100000 Records using React Js</h3>
            <div className="row">
                  <table className="table table-striped">
                      <thead>
                        <th>No</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Birthdate</th>
                     
                      </thead>
                        {
                          users.map((res) => {
                           return (
                            <tbody>
                            <td>{res.id}</td>
                            <td>{res.FirstName}</td>
                            <td>{res.LastName}</td>
                            <td>{res.Email}</td>
                            <td>{res.Birthdate}</td>
                          
                            </tbody>    
                              )
                            })
                         }  
                </table>    
            </div>    
         </div>
    );
  }

export default RecordsFetch;

Now call this file inside App.js ifle

App.js

import React from 'react';
import RecordsFetch from './RecordsFetch.js'

function App() {
  return (
    <div className="App">
     <RecordsFetch/>
    </div>
  );
}

export default App;

Now run the project Iam using PORT 4001 You can change the port using this line of code http://localhost:4001/

 “start”: “SET PORT=4001 && react-scripts start”,

Subscribe to My Programming YouTube Channel Before Downloading the code :

Download the Source Code : Load 1 Million Records in ReactJS

Read our more tutorials

How to Load millions record in React

May 12, 2021UncategorizedComments: 0

I will show you how you can load 1 million records in Reactjs .How to Load millions record in React In this blog post, we are going to discuss how to load more than a million records in less than a second in ReactJS.I will use JSON Server as a database you can use MYSQL …

Read more

Building an Image Gallery with Laravel and React

May 11, 2021LARAVEL, REACT JSComments: 0

Today we are building an image gallery with Laravel and React. Building an Image Gallery with Laravel and React. Now Start from Frontend part So we will making our ReactJS Project . To Install React project run this command in your cmd or terminal npx create-react-app image_galllary . Reactjs or Angular and Any other Server …

Read more

How to search records in ReactJS

May 7, 2021REACT JSComments: 0

In this article, I am going to show you from scratch how to implement a searchable/filtered list of data in React.How to search records in ReactJS. We will create a search form in ReactJS Using this form We can search any record. We will work in Functional Components, not class components. Read more about React …

Read more