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 …
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 …
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 …