We Keep Coding

dom elements not re-rendering when state changes

I'm creating a simple app that queries an api that returns a list of books when you search by title. I am adding the option to sort the search results.
When a user searches for a title, eg 'harry potter', the app stores an array of books in state and renders the results.
When a user then selects the option to sort (eg by title), my array of books in state is correctly being sorted and updated, but the old unsorted books are the ones shown.
Notably, if I then select to sort by date, this time I am seeing sorted books being displayed by it's the books sorted by title not date!
And also, at all times, the value of my books array is correctly sorted, but the books being displayed are not (it's essentially the previous state of books which is being rendered).
This is observable if you keep switching between title and sort, the app will update, but the results will be sorted by title when you try to sort by date and vice versa.
It's almost as if when I select a sort option, the dom is rerendering, and then I'm changing the value of books in state, but that isn't then again causing a re-rendering of the dom.
Any ideas what might be going wrong?
sandbox
The code:
export default function App() {
const [input, setInput] = useState("");
const [books, setBooks] = useState([]);
const [loading, setLoading] = useState(false);
const [sort, setSort] = useState("");
const API_URL = `https://openlibrary.org/search.json?title=`;
const sortFn = (books, sortType) => {
setLoading(true);
if (sortType === "title") {
console.log("sorting by title!");
const sortedBooks = books.sort((a, b) => a.title.localeCompare(b.title));
setBooks(sortedBooks);
} else if (sortType === "publishDate") {
console.log("sorting by date, most recent");
const sortedBooks = books.sort((a, b) => {
const dateA = new Date(a.publishDate);
const dateB = new Date(b.publishDate);
return dateB - dateA;
});
console.log("sorted books:", sortedBooks);
setBooks(sortedBooks);
}
setLoading(false);
};
const getBooks = async (queryStr) => {
setLoading(true);
try {
const {
data: { docs }
} = await axios.get(`${API_URL}${queryStr}`);
// console.log(docs);
const slice = docs.slice(0, 10);
const results = slice.map((item) => ({
title: item.title,
author: item.author_name[0],
isbn: item.isbn[0].trim(),
publishDate: item.publish_date[0]
}));
if (sort) {
sortFn(results, sort);
} else {
setBooks(results);
}
setLoading(false);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
if (books && sort) sortFn(books, sort);
}, [sort]);
const changeHandler = (e) => {
setInput(e.target.value);
};
const selectChange = (e) => {
setSort(e.target.value);
};
const submitHandler = (e) => {
e.preventDefault();
if (input) {
//must replace whitespace within string with '+' symbol
const query = input.trim().replace(" ", "+");
getBooks(query);
}
setInput("");
};
console.log("books:", books);
const tiles = books.map((book) => (
<Book
key={book.isbn}
title={book.title}
author={book.author}
publishDate={book.publishDate}
imgURL={`https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`}
/>
));
return (
<div className="App">
<form onSubmit={submitHandler}>
<input type="text" value={input} onChange={changeHandler} />
<button type="submit">Submit</button>
</form>
<select onChange={selectChange}>
<option value="">Sort by</option>
<option value="title">Title(A-Z)</option>
<option value="publishDate">Publish Date</option>
</select>
{loading && <div>Loading</div>}
{!loading && books ? tiles : null}
</div>
);
}

UseContext Doesn't Re-render when an component value is updated

I'm using React's context api to store an array of Favorite products.The favorites Array is filled with Boolean Value False and turned to true based on id of the products.There is collection page which displays productCards having an addtoFavorite button,Upon clicking the button disables but if the product is already present in favorites it has to disabled.
Now it works perfectly fine for the 1st Page , disabling only favorite products with the array containing values true and false based on index of the products but when navigated to another page it disables other products at the same index even though the favorites array is updated to have all values as false.If we Navigate Back or move to another page its value now remains false in the array.It looks as if UseContext updates the value of the array late or doesn't rerender on change.
I have tried implementing other stuffs but it still wouldn't re-render when the array was changed.
Here's the FavoritesContext:
const FavoritesContext = React.createContext({
addToFavorites: (id,index) => {},
favorites:[],
storedFavorites:(data) => {}
});
export const FavoritesContextProvider = (props) => {
const authCtx = useContext(AuthContext)
const token = authCtx.token;
const userId = authCtx.userId;
const [favorites,setFavorites] = useState([]);
// To retrieve stored favorites from FireBase
const retrieveStoredFavorites = (data) => {
let fav = new Array(data.length).fill(false);
setFavorites(fav);
let queryParams = '?auth=' + token + '&orderBy="userId"&equalTo="' + userId + '"';
axiosInstance.get('/Favorites.json' + queryParams)
.then((response) => {
let fetchProductData = [];
for (let key in response.data) {
fetchProductData.push({
...response.data[key],
productId: key,
});
}
let favoriteList = [];
//To find if the product is present in the Fetched Favorite products List
for(let i=0;i<data.length;i++){
let ids = data[i].id
let favoriteProducts = !!fetchProductData.find((product)=>product.id==ids)
favoriteList.push(favoriteProducts)
}
//console.log(favoriteList)
setFavorites(favoriteList)
});
}
//Add to Favorites
const addTofavoritesHandler = (Product,index) => {
axiosInstance
.post('Favorites.json?auth='+token,Product)
.then((response) => {
//console.log("SUCCESS")
})
.catch((error) => console.log(error));
let favoriteOnes = [...favorites];
favoriteOnes[index] = true;
setFavorites(favoriteOnes);
};
const contextValue = {
addToFavorites:addTofavoritesHandler,
favorites:favorites,
storedFavorites:retrieveStoredFavorites
};
return (
<FavoritesContext.Provider value={contextValue}>
{props.children}
</FavoritesContext.Provider>
);
};
export default FavoritesContext;
Now here is the Collection Page
const CollectionPage = () => {
const classes = useStyles();
const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [productsPerPage] = useState(9);
const [loading, setLoading] = useState(false);
const { enqueueSnackbar } = useSnackbar();
const authCtx = useContext(AuthContext);
const token = authCtx.token;
const userId = authCtx.userId;
const favoriteCtx = useContext(FavoritesContext)
const favorites = favoriteCtx.favorites
//To Display the Products in Main Content
const DisplayProductsHandler = (Data) => {
//Get value of FirstPageNumber and LastPageNumber
const indexOfLastPage = currentPage * productsPerPage;
const indexOfFirstPage = indexOfLastPage - productsPerPage;
//console.log("[Products]")
const productData = Data.slice(indexOfFirstPage, indexOfLastPage);
favoriteCtx.storedFavorites(productData)
//console.log(productData);
const updatedProductData = productData.map((product,index) => {
return (
<ProductCard
Link={`/Info/${product.id}`}
key={product.id}
Title={product.productName}
Image={product.productImage}
Value={product.price}
addToFavorites={() => addTofavoritesHandler(product,index)}
addToCart={() => addToCartHandler(product)}
disableFavoriteButton={favorites[index]}
/>
);
});
setProducts(updatedProductData);
};
//Display the Products from DisplayProductHandler
useEffect(() => {
setLoading(true);
//Scroll To Top When Reloaded
window.scrollTo(0, 0);
//To Display the Products
if (filteredProducts.length === 0) {
DisplayProductsHandler(ProductData);
} else {
DisplayProductsHandler(filteredProducts);
}
setLoading(false);
}, [currentPage, filteredProducts]);
//Add to Favorites Handler
const addTofavoritesHandler =(likedProduct,index) => {
setLoading(true);
let updatedLikedProduct = {
...likedProduct,
userId: userId,
};
favoriteCtx.addToFavorites(updatedLikedProduct,index)
//To Display ADDED TO FAVORITES Message using useSnackbar()
enqueueSnackbar("ADDED TO FAVORITES", { variant: "success" })
setLoading(false);
};
I need it to re-render every time the array in context is updated.

Losing in_cart state only on certain page refresh

So i am currently using states to determine if a user has added an item to their cart or not. It is working almost flawlessly other than when they are on the "Product Page"(The page where they add to cart), and they refresh it empties out the in_cart array, but if im on the home page after adding them i can refresh all i want, this means it has to be something in the product page code but cant figure it out, here is the product page code:
const ProductPageBody = ({ products, in_cart, set_in_cart }) => {
//Keeps track of color user selects
const [color, setColor] = useState("");
//Keeps track of size user selects
const [size, setSize] = useState("Small");
//Filters out the product that the user selected
const { shirtName } = useParams();
const shirt = products.filter((product) => product.name === shirtName);
//Updates state size of shirt being selected
const updateSize = () => {
let select = document.getElementById("sizeSelect");
let text = select.options[select.selectedIndex].text;
setSize(text);
};
//Updates state color of shirt being selected
const updateColor = useCallback(async (userColor, shirt) => {
const shirtColorSource = await fetch(
`http://localhost:5000/products/${shirt.product_id}/${userColor}`
);
const shirtColor = await shirtColorSource.json();
console.log(shirtColor);
shirt.image = shirtColor[0].image;
setColor(userColor);
}, []);
//Occurs when ADD TO CART is clicked
const updateInCart = async (e) => {
e.preventDefault();
const newShirt = { ...shirt[0] };
newShirt["color"] = color;
newShirt["size"] = size;
const newList = in_cart.list.concat(newShirt);
const cost = newList.reduce((sum, shirt) => sum + shirt.price, 0);
set_in_cart({
list: newList,
totalcost: cost,
});
};
//Stores in cart items
useEffect(() => {
localStorage.setItem("inCartItems", JSON.stringify(in_cart));
}, [in_cart]);
and its parent where the state is located:
const Routes = () => {
const [products, setProducts] = useState([]);
const [in_cart, set_in_cart] = useState({
list: [],
totalCost: 0,
});
const getProducts = async () => {
try {
const response = await fetch("http://localhost:5000/products/");
const jsonData = await response.json();
setProducts(jsonData);
} catch (err) {
console.error(err.message);
}
if (localStorage.getItem("inCartItems")) {
set_in_cart(JSON.parse(localStorage.getItem("inCartItems")));
}
};
useEffect(() => {
getProducts();
}, []);
any help would be appreciated, thank you!

In Routes, add an effect to persist the cart data (in_cart) to localStorage when it updates.
useEffect(() => {
try {
localStorage.setItem("inCartItems", JSON.stringify(in_cart));
} catch(err) {
// do something if cart persistence fails
}
}, [in_cart]);

array.list.concat() is removing two elements in json

I am trying to store two new elements into a json object which is called shirt, it is created by filtering from my database like below:
let shirts = products.filter((product) => product.name === shirtName);
I then use states and create colors and size and create two elements for the two in the json object shirts as below:
shirts.size = size;
shirts.color = color;
const newList = in_cart.list.concat(shirts);
but if i console.log(shirts) i get this response:
and if i console.log(newList) after using concat i get:
I then set a state equal to newList like this
set_in_cart({
list: newList,
totalcost: cost,
});
and send it up to a parent element, but i need to determine the color and size of each item the user selects so this is why i need to get this to be stored on each specific object, thank you in advance!
Edit:
ProductPage.jsx:
const ProductPageBody = ({ products, in_cart, set_in_cart }) => {
//Keeps track of color user selects
const [color, setColor] = useState("none");
//Keeps track of size user selects
const [size, setSize] = useState("Small");
//Filters out the product that the user selected
let { shirtName } = useParams();
let shirts = products.filter((product) => product.name === shirtName);
//Updates state size of shirt being selected
const updateSize = () => {
let select = document.getElementById("sizeSelect");
let text = select.options[select.selectedIndex].text;
setSize(text);
};
//Updates state color of shirt being selected
const updateColor = (userColor) => {
setColor(userColor);
};
//Occurs when ADD TO CART is clicked
const updateInCart = async (e) => {
e.preventDefault();
const body = {color, shirts}
const headers = {
"Content-Type": "application/json"
}
// return fetch('http://localhost:3000/color', {
// method: "POST",
// headers: headers,
// body: JSON.stringify(body)
// }).then(response => {
// console.log("Success")
// })
// .catch(err = console.log(err));
shirts.size = size;
shirts.color = color;
console.log(shirts);
const newList = in_cart.list.concat(shirts);
console.log(newList);
const cost = newList.reduce((sum, shirt) => sum + shirt.price, 0);
set_in_cart({
list: newList,
totalcost: cost,
});
};
//Stores in cart items
useEffect(() => {
localStorage.setItem("inCartItems", JSON.stringify(in_cart));
}, [in_cart]);
Routes.jsx(Parent):
const [products, setProducts] = useState([]);
const [in_cart, set_in_cart] = useState({
list: [],
totalCost: 0,
});
console.log(in_cart);
const getProducts = async () => {
try {
const response = await fetch("http://localhost:5000/products/");
const jsonData = await response.json();
setProducts(jsonData);
} catch (err) {
console.error(err.message);
}
if (localStorage.getItem("inCartItems")) {
set_in_cart(JSON.parse(localStorage.getItem("inCartItems")));
}
};
useEffect(() => {
getProducts();
}, []);
return (
<Router history={history}>
<Switch>
<Route
exact
path="/"
render={(props) => (
<HomePage
products={products}
in_cart={in_cart}
set_in_cart={set_in_cart}
/>
)}
/>
<Route
path="/ProductPage/:shirtName"
render={(props) => (
<ProductPage
products={products}
in_cart={in_cart}
set_in_cart={set_in_cart}
/>
)}
/>

By doing shirts.size = size; and shirts.color = color;, you are adding these properties to the shirts array itself, not the objects inside it. To add these properties to each object inside the shirts array, use this
shirts.forEach((shirt)=>{ shirt.color= color ; shirt.size=size;})

let shirts = products.filter((product) => product.name === shirtName);
Above line returns an array of matched products.
If you want to set color and size for each matched shirt, the code would be
shirts.map((shirt) => {
return Object.assign({}, shirt, {color: "<input_state_color>", size: "input_state_size"});
})
[OR]
If you prefer taking the first matched product,
then code would be
let shirt = products.find((product) => product.name === shirtName);
shirt.color = "<input_state_color>";
shirt.size = "<input_state_size>";
Hope this clarifies.

How to paginate Cloud Firestore data with ReactJs

I'm working with Firebase - Cloud Firestore and at the moment I would like to paginate all the records available. I already have a list of records and what is left is some pagination for this. I'm new with Cloud Firestore, so any clarity is appreciated.
I checked the Firestore documentation (https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query) and examples with ReactJS, but there is not much available.
I understand that eg:.startAt(0), .limit(10), but the question is how to paginate properly with this component called at the render method.
import React, { Component } from 'react';
import Pagination from "react-js-pagination";
import firestore from "./Firebase";
export default class DataList extends Component {
constructor(props) {
super(props);
this.state = {
dbItems: [],
currentPage: 1,
itemsPerPage: 3,
totalItemCount: 1,
activePage: 15
}
this.handlePageChange = this.handlePageChange.bind(this);
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({ activePage: pageNumber });
}
async getItems() {
const { currentPage, itemsPerPage } = this.state;
const startAt = currentPage * itemsPerPage - itemsPerPage;
const usersQuery = firestore.collection('Users').orderBy("email").startAt(startAt).limit(itemsPerPage)
const snapshot = await usersQuery.get()
const items = snapshot.docs.map(doc => doc.data())
return this.setState({
dbItems: items,
totalItemCount: firestore.collection('Users').get().then(res => console.log(res.size))
})
}
componentDidMount() {
this.getItems()
}
componentDidUpdate(prevProps, prevState) {
const isDifferentPage = this.state.currentPage !== prevState.currentPage
if (isDifferentPage) this.getItems()
}
render() {
return (
<div>
{this.state.dbItems.map((users, index) => {
return (
<p key={index}>
<b>First Name:</b> {users.firstname} <br />
<b>Email:</b> {users.email}
</p>
)
})
}
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.itemsPerPage}
totalItemsCount={this.state.totalItemCount}
pageRangeDisplayed={this.state.itemsPerPage}
onChange={this.handlePageChange}
/>
</div>
)
}
}
Thank you for the help!

Pagination can be achieved using startAt()
// Get Items.
async fetchUsers = () => {
// State.
const {users, usersPerPage} = this.state
// Last Visible.
const lastVisible = users && users.docs[users.docs.length - 1]
// Query.
const query = firestore.collection('Users')
.orderBy('email')
.startAfter(lastVisible)
.limit(usersPerPage)
// Users.
const users = await query.get()
// ..
return this.setState({users})
}
// Did Mount.
componentDidMount() {
this.fetchUsers()
}
// Did Update.
componentDidUpdate(prevProps, prevState) {
const isDifferentPage = this.state.currentPage !== prevState.currentPage
if (isDifferentPage) this.fetchUsers()
}

Anyone new to Firestore and Firestore Pagination with ReactJS that would be kinda confusing to understand how Pagination will work or when to trigger call to next set of documents in firestore. anyone struggle like this try my example to make some ideas and process ahead.(Im using React-Bootstrap to render UI Elements)
01 - Install Package react-infinite-scroll-component
First Install this package yarn add react-infinite-scroll-component
02 - Include Package
Include it to your file by 'import InfiniteScroll from 'react-infinite-scroll-component';' importing it
03 - Init State
initiate state with empty list array
this.state = {
list: [],
};
04 - Create Function to get first set of data and initiate it with component did mount
//component did mount will fetch first data from firestore
componentDidMount(){
this.getUsers()
}
getUsers(){
let set = this
//initiate first set
var first = set.ref.collection("users").limit(12);
first.get().then(function (documentSnapshots) {
// Get the last visible document
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
//initiate local list
const list = [];
documentSnapshots.forEach(function(doc) {
//im fetching only name and avatar url you can get any data
//from your firestore as you like
const { name, avatar_full_url } = doc.data();
//pushing it to local array
list.push({ key: doc.id, name, avatar_full_url });
});
//set state with updated array of data
//also save last fetched data in state
set.setState({ list, last: lastVisible });
});
}
05 - Create function to get balance data set
fetchMoreData = () => {
let set = this
//get last state we added from getUsers()
let last = this.state.last
var next = set.ref.collection("users").startAfter(last).limit(12);
next.get().then(function (documentSnapshots) {
// Get the last visible document
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
const list = [];
documentSnapshots.forEach(function(doc) {
//im fetching only name and avatar url you can get any data
//from your firestore as you like
const { name, avatar_full_url } = doc.data();
list.push({ key: doc.id, name, avatar_full_url });
});
//set state with updated array of data
//also save last fetched data in state
let updated_list = set.state.list.concat(list);
set.setState({ list: updated_list, last: lastVisible });
});
};
06 - Render UI
<InfiniteScroll
dataLength={this.state.list.length}
next={this.fetchMoreData}
hasMore={true}
loader={<span className="text-secondary">loading</span>}>
<Row className="mt-3">
{ this.state.list.map((single, index) => (
<Col lg={4} key={ index }>
<div>
<Image src={ single.avatar_full_url }roundedCircle width="100" />
<h2>{ single.name }</h2>
</div>
</Col>
))}
</Row>
</InfiniteScroll>

Check this example this could help anyone who trying previous / next pagination
//initial state
const [list, setList] = useState([]);
const [page, setPage] = useState(1);
//loading initial data
useEffect(() => {
const fetchData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc') //order using firestore timestamp
.limit(5) //change limit value as your need
.onSnapshot(function(querySnapshot) {
var items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
})
};
fetchData();
}, []);
After loading initial data use following function for next button trigger
//next button function
const showNext = ({ item }) => {
if(list.length === 0) {
//use this to show hide buttons if there is no records
} else {
const fetchNextData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc') //order using firestore timestamp
.limit(5) //change limit value as your need
.startAfter(item.created) //we pass props item's first created timestamp to do start after you can change as per your wish
.onSnapshot(function(querySnapshot) {
const items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
setPage(page + 1) //in case you like to show current page number you can use this
})
};
fetchNextData();
}
};
Then Previous button function
//previous button function
const showPrevious = ({item}) => {
const fetchPreviousData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc')
.endBefore(item.created) //this is important when we go back
.limitToLast(5) //this is important when we go back
.onSnapshot(function(querySnapshot) {
const items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
setPage(page - 1)
})
};
fetchPreviousData();
};
at the end create list view & two buttons like this
{
//list doc's here this will come inside return (place this code inside table)
list.map((doc) => (
<tr key={doc.key}>
<td>{ doc.name }</td>
<td>{ doc.age }</td>
<td>{ doc.note }</td>
</tr>
))
}
{
//show previous button only when we have items
//pass first item to showPrevious function
page === 1 ? '' :
<Button onClick={() => showPrevious({ item: list[0] }) }>Previous</Button>
}
{
//show next button only when we have items
//pass last item to showNext function
list.length < 5 ? '' :
<Button onClick={() => showNext({ item: list[list.length - 1] })}>Next</Button>
}
That's it check my code comments where you can change as per your need. this is what happens when you paginate using Firebase FireStore. you can use create custom hook to reuse these component as per your need.
Hope this could help someone so i made a gist check it here

here AddTable and AddForm is adding table and add form to fill data in table...
import React, { useEffect, useState } from "react";
import Button from "react-bootstrap/Button";
import Pagination from "react-bootstrap/Pagination";
import AddTable from "../management/AddTable";
import AddForm from "../management/AddSuperAdminForm";
import {
where,
getDocs,
collection,
query,
orderBy,
startAfter,
limit,
endBefore,
limitToLast,
} from "firebase/firestore";
import { db_firestore } from "../../../firebase.config";
const SuperAdmin = () => {
const [tableDataArray, setTableDataArray] = useState();
const [show, setShow] = useState(false);
const [editId, setEditId] = useState("");
const [oldUid, setOldUid] = useState("");
const [lastVisible, setLastVisible] = useState();
const [prevVisible, setPrevVisible] = useState();
const handleClose = () => {
setShow(false);
setEditId("");
};
const handleShow = () => {
setShow(true);
setEditId("");
};
let tempdata;
let pageSize = 3;
let q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
limit(pageSize)
);
function nextPage(lastVisible) {
q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
startAfter(lastVisible),
limit(pageSize)
);
}
function prevPage(firstVisible) {
q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
endBefore(firstVisible),
limitToLast(pageSize + 1)
);
}
const newfun = async () => {
const querySnapshot = await getDocs(q);
tempdata = [];
// Get the last visible document
setLastVisible(querySnapshot.docs[querySnapshot.docs.length - 1]);
// Get the prev visible document
setPrevVisible(querySnapshot.docs[0]);
querySnapshot.forEach((doc) => {
const { name, email, uid } = doc.data();
tempdata.push([name, email, uid, doc.id]);
});
console.log("SuperAdmin...");
setTableDataArray(tempdata);
};
useEffect(() => {
newfun();
// setInterval(() => { // if you want to get new update after some secound
// newfun();
// }, 10000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div>
<Button
className="d-block mx-auto my-2"
variant="primary"
onClick={handleShow}
>
Add SuperAdmin
</Button>
{/* -----> AddTable <------
Index will generate Automatic In Table.
Always keep action end of the table.
*/}
{tableDataArray ? (
<AddTable
tableHeaders={["Name", "Email", "uid", "Action"]}
tableData={tableDataArray}
fetchNew={newfun}
setEditId={setEditId}
setShow={setShow}
setOldUid={setOldUid}
/>
) : (
""
)}
<AddForm
fetchNew={newfun}
show={show}
setShow={setShow}
handleClose={handleClose}
editId={editId}
oldUid={oldUid}
/>
<Pagination className="float-end">
<Pagination.Item
className="shadow-none"
size="lg"
onClick={() => {
prevPage(prevVisible);
newfun();
}}
>
Previous
</Pagination.Item>
<Pagination.Item
className="shadow-none"
size="lg"
onClick={() => {
nextPage(lastVisible);
newfun();
}}
>
Next
</Pagination.Item>
</Pagination>
</div>
);
};
export default SuperAdmin;

Use startAt() or startAfter() for that
firestore
.collection("Users")
.startAt(0)
.limit(10)
.get()