I'm building a simple to do list app that uses React for the front end and Express/MongoDB for the back end.

The add post function and delete function do work as intended however the list doesn't render the changes unless the page is fully refreshed

import './App.css';
import AddItemComponent from './components/AddItemComponent';
import LoadingScreen from './components/LoadingScreen';
import ItemComponent from './components/ItemComponent';
import axios from 'axios';
import { useState, useEffect } from 'react';

function App() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);

    axios.get('http://localhost:3000/items')
      .then((data) => {
        setItems(data.data)
      })
      .catch((e) => console.log(e))
      .then(() => setLoading(false))

  }, [setLoading])

  if (loading) {
    return <LoadingScreen />
  }

  return (
    <div className="App">
      <div className='itemList'>
        <ul>
          {
            items.map((e) => {
              return <ItemComponent key={e._id} item={e} />
            })
          }
        </ul>
      </div>
      <div className='addItem'>
        <AddItemComponent />      
      </div>
    </div>
  );
}

I thought the useEffect hook would get the new list every time App re-renders and update the items however items isn't updated until after the page has fully refreshed

​

https://preview.redd.it/d6a8pefc39191.png?width=1757&format=png&auto=webp&s=8fdab301d49a5a599293028d0629f456242711b9