How to properly update a state records in reacts - reactjs

Question

The Code below successfully displays record from Atlassian Jira Storage API
//import goes here
const fetchRec = async () => {
const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
return data.results;
};
const App = () => {
const [projects] = useState(fetchRec);
return (
<div>
// display or map projects records here
{projects.map(project => (
<div>
<b>Fullname: {project.fullname}</b>
<b>Email: {project.email}</b>
</div>
))}
</div>
);
}
Here is my Issue. I need to refresh the Records when new data is inserted.
So I implemented the code below. when I click on refresh Records button, the new inserted record is not updated
<Button text="Refresh Records" onClick={async () => { await reloadRec(); }} />
async function reloadRec() {
fetchRec().then(projects);
//const [projects] = useState(async () => await fetchRec());
}
Here is the full code efforts so far
// Import goes here
const fetchRec = async () => {
const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
return data.results;
};
async function reloadRec() {
fetchRec().then(projects);
//const [projects] = useState(async () => await fetchRec());
}
const App = () => {
const [projects] = useState(fetchRec);
return (
<div>
// display or map projects records here
{projects.map(project => (
<div>
<b>Fullname: {project.fullname}</b>
<b>Email: {project.email}</b>
</div>
))}
<Button text="Refresh Records" onClick={async () => { await reloadRec(); }} />
</div>
);
}

Answer 1

This is the problem:
async function reloadRec() {
fetchRec().then(projects);
//const [projects] = useState(async () => await fetchRec());
}
In the above function, projects is undefined. And even if it was the same variable as defined in the App function, it's not a function that the then clause would invoke.
I think this is closer to what you want and follows the standard practices.
const App = () => {
const [projects, setProjects] = useState([]);
const fetcher = async () => {
const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
setProjects(data.results);
};
// do the initial fetch with an effect
useEffect(() => {
fetcher();
}, []);
return (
<div>
// display or map projects records here
{projects.map(project => (
<div>
<b>Fullname: {project.fullname}</b>
<b>Email: {project.email}</b>
</div>
))}
<Button text="Refresh Records" onClick={fetcher} />
</div>
);
}

Answer 2

InOrder to update information on the DOM you should update a state and DOM will show latest information. You bind and setRecord with fetchData function
Extanding
const App = () => {
const [projects,setProjects] = useState([]);
const fetchRecords = async() => {
const data = await /*... your data base query */
// Assuming projects is an array of project
setProjects(data.projects);
}
useEffect(()=>{
fetchRecords();
},[])
return (
<div>
// display or map projects records here
{projects.map(project => (
<div>
<b>Fullname: {project.fullname}</b>
<b>Email: {project.email}</b>
</div>
))}
<Button text="Refresh Records" onClick={fetchRecords} />
</div>
);
}
So at first when Component is mount you will see Projects list and then when you click on reload fetchRecords is again called resulting in state change and will reflect on dom