title: Update the DOM without refreshing the page in React.js
body: <p>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:</p>
  <pre><code>import './App.css'
  import React, {useState, useEffect} from 'react'
  import axios from 'axios'
  
  export default function App() {
  const [post, setPost]=useState([])
  const url=&quot;http://localhost:3000/users&quot;
  
  useEffect(()=&gt;{
  axios
  .get(url)
  .then(res=&gt;{
     setPost(res.data)
  })
  .catch(err=&gt;{
      console.log(err)
  })
  
  },[])
  
  const showUsers=
  post.map(item=&gt;{
  return(
  &lt;div className=&quot;card&quot; key={item.id}&gt;
  &lt;h2&gt;Name: {item.name}&lt;/h2&gt;
  &lt;h3&gt;Username: {item.username}&lt;/h3&gt;
  &lt;p&gt;Email:{item.email}&lt;/p&gt;
  &lt;/div&gt;
          
  )
  })}
  
  return (
  &lt;div className=&quot;container&quot;&gt;
  {showUsers}
  &lt;/div&gt;
     )
  }
  
  </code></pre>
  <p><strong>NOTE</strong> I attempted to put <code>post</code> state variable, in the dependency array of <code>useEffect</code> hook, and it worked as I wanted but it started to send infinite <code>get requests</code> to the server. Something like that</p>
  <pre><code>useEffect(()=&gt;{
  axios
  .get(url)
  .then(res=&gt;{
     setPost(res.data)
  })
  .catch(err=&gt;{
      console.log(err)
  })
  
  },[post]) 
  </code></pre>