How to use React hooks with firestore - reactjs

Question

How to use React hooks to show a only updated data in table ?
Now I can display all the information. But I want to display the data in a table. When the data in firestore is updated, the data will be displayed on the website. so how to use a React Hook on this code to show information to display only a updated data ?
import React, { useEffect, useState } from "react";
import { Button } from "react-bootstrap";
import Table from 'react-bootstrap/Table';
import BookDataService from "../../services/book.services";
import "./table.css";
const tableList = () => {
const [profile, setBooks] = useState([]);
useEffect(() => {
getBooks();
}, []);
const getBooks = async () => {
const data = await BookDataService.getAllBooks();
console.log(data.docs);
setBooks(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
return (
<>
<div className="mb-4">
<Button variant="success edit" onClick={getBooks}>
Refresh
</Button>
</div>
{/* <pre>{JSON.stringify(books, undefined, 2)}</pre>} */}
<Table striped bordered hover variant="dark" size="md">
<thead>
<tr>
<th>RollNo</th>
<th>Name</th>
<th>Student ID</th>
<th>Subject</th>
<th>Room</th>
<th>Date</th>
<th>Time</th>
{/*<th>Action</th>*/}
</tr>
</thead>
<tbody>
{profile.map((doc, index) => {
const timestamp = { nanoseconds: doc.timeStamp.nanoseconds, seconds: doc.timeStamp.seconds }
const firebasetime = new Date(
timestamp.seconds * 1000 + timestamp.nanoseconds / 1000000,
);
const date = firebasetime.toDateString();
const timeStamp = firebasetime.toLocaleTimeString();
console.log(date, timeStamp);
return (
<tr key={doc.id}>
<td>{index + 1}</td>
<td>{doc.name}</td>
<td>{doc.sid}</td>
<td>{doc.Subject}</td>
<td>{doc.Room}</td>
<td>{date}</td>
<td>{timeStamp}</td>
</tr>
);
})}
</tbody>
</Table>
</>
);
};
export default tableList;

Answer 1

Here is the simple example for show only updated data:
import { useState, useEffect } from 'react';
const SimpleTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://samplejsonholder.test.com/test');
const data = await response.json();
setData(data);
//You can replace this with data source or api call
};
fetchData();
}, []);
useEffect(() => {
// Every time the 'data' state updates, this will run.
console.log('data updated:', data);
}, [data]);
return (
...
);
};