Update the DOM without refreshing the page in React.js - reactjs

Question

I am fetching the data from the API (fake REST API built with json-server) in my react app. I want the app to be updated automatically without refreshing manually as any changes occur in the API. How do I do this? the code is below:
import './App.css'
import React, {useState, useEffect} from 'react'
import axios from 'axios'
export default function App() {
const [post, setPost]=useState([])
const url="http://localhost:3000/users"
useEffect(()=>{
axios
.get(url)
.then(res=>{
setPost(res.data)
})
.catch(err=>{
console.log(err)
})
},[])
const showUsers=
post.map(item=>{
return(
<div className="card" key={item.id}>
<h2>Name: {item.name}</h2>
<h3>Username: {item.username}</h3>
<p>Email:{item.email}</p>
</div>
)
})}
return (
<div className="container">
{showUsers}
</div>
)
}
NOTE I attempted to put post state variable, in the dependency array of useEffect hook, and it worked as I wanted but it started to send infinite get requests to the server. Something like that
useEffect(()=>{
axios
.get(url)
.then(res=>{
setPost(res.data)
})
.catch(err=>{
console.log(err)
})
},[post])

Answer 1

First, let's talk about why putting post in the useEffect dependency causes infinite requests. As stated:
You can tell React to skip applying an effect if certain values haven’t changed between re-renders.
but the problem is that every time you call the effect, you actually change post by calling setPost. this causes a re-render. while react is doing the re-render it checks whether it should run the effect again or not. since the variable post in the useEffect has changed, react decides to run the effect again. this causes the infinite loop.
Back to your main question. If I understood correctly you want to sync your application's state with the server's state regarding posts. You can achieve that by polling or websockets. in polling the client send a request to the server every few seconds to check if there has been any chaneges in the state. websockets make it possible to have a two-way connection between the server and client. the two-way connection makes it possible for the server to send information to the client at any time.
below is a very simple polling solution to your problem. I strongly encourage you to read more about the concept.
// ommited code
const [post, setPost]=useState([])
const url="http://localhost:3000/users"
const WAIT_TIME = 5000;
useEffect(() => {
const id = setInterval(() => {
axios
.get(url)
.then(res=>{
setPost(res.data);
})
.catch(err=>{
console.log(err);
})
}, WAIT_TIME);
return () => clearInterval(id);
}, [post]);
// omitted code

Answer 2

By default useEffect run on each update.
If you give ,[post])
It tell React to skip applying an effect if certain values (post) haven’t changed between re-renders.
If you want fetch only at mount use an ,[])
The react doc explain this very well:
Optimizing Performance by Skipping Effects