(def project-list (r/atom [])) should use defonce instead of def so that the state is preserved after a hot reload. Of course, that means that if you need to reset the state, you'll have to do so manually via either reloading the page or resetting the atom from the REPL or some other action. And while it doesn't affect anything, that second doall is not needed - you can have that for in there, Reagent will realize the sequence for you.

I have changed the def to defonce and that seems to solve the problem of the grid disappearing upon re-compiling, but the error of the entire thing getting lost upon refresh or simply going to localhost:3000 remains. Any ideas? I've removed the doall

That fetch-and-update is in a strange place. It's bad luck to do that sort of thing in a render function in Reagent

The GET is async, so upon page load the atom will be empty when main-grid resumes after fetch-and-update. But since fetch-and-update was undertaken within the render function, the question of whether the atom changed (upon completion of the GET) might be murky

Could you recommend something to do? Perhaps another atom that keeps the loading state?

Effects should be triggered by events, not by rendering

Good point. The ratom will be changed and it will lead to a re-rendering. However, that will also trigger a second fetching right away. An alternative to an event triggering fetching (that can sometimes be cumbersome) would be using a form-2 or form-3 component, or r/with-let where the fetching is initiated in the binding block (you can use _ as a bogus binding name).

entire thing getting lost upon refresh"Refresh" as in the Refresh button in the browser? Doing that will reset everything, but should also trigger another fetching. If the component is rendered empty and fetching is not triggered, I'd have to see a reproduction case.

Yes, my grid disappears when I click refresh in the browser.

It does indeed trigger another fetching as when I do that the debug statements in the fetch-and-update does indeed fetch the projects correctly

In these cases it gets stuck in the "No projects found"

I had tried adding a refetch function in place there but to no avail

Oh, try replacing map with mapv in that :handler.

Done. Does not seem to affect anything

How is main-grid used?

It's the main page. The routing map:

(ns app.routingconfig
  (:require [app.pages.main :refer [main-grid]]
            [app.pages.about :refer [about-page]]
            [app.pages.contact :refer [contact-page]]
            [app.pages.projectpage :refer [project-page]]))

(defn route-component-map [path]
  (cond
    (= path "/") main-grid
    (= path "/about") about-page
    (= path "/contact") contact-page
    :else (project-page {:project-id (last (clojure.string/split path #"/"))})
    ))

(ns app.routing
  (:require [app.state :as state]
            [app.routingconfig :refer [route-component-map]]))

(defn navigate [path]
  (let [new-content (route-component-map path)]
    (reset! state/current-content (new-content))
    (.pushState js/window.history nil "" path)))

(ns app.layout
  (:require [app.components.logo :refer [logo]]
            [app.state :as state]
            [app.components.navbar :refer [navbar]]
            [app.routing :as routing])) ;; Make sure routing is required

(defn layout []
  [:div
   [logo]
   [navbar]
  @state/current-content]) ;; Dereference current-content here

(ns app.core
  (:require [reagent.core :as r]
            [reagent.dom :as rdom]
            [app.state :as state]
            [app.routing :as routing]
            [app.layout :as layout]))

(defn init-routing []
  (add-watch state/current-route :route-change
               (fn [_ _ _ new-route]
                 (routing/navigate new-route))))

(defn ^:export main []
  (init-routing)

  ;; Re-establish the current route based on the browser's URL
  (let [current-path (.-pathname js/window.location)]
    (reset! state/current-route current-path)

    ;; Set the current content based on the current route
    (routing/navigate current-path))

  ;; Render the app
  (rdom/render [layout/layout] (.getElementById js/document "app"))

  ;; Handle browser navigation events
  (.addEventListener js/window "popstate"
                     (fn [_] (routing/navigate (.-pathname js/window.location)))))

Do not use Reagent components with (). Always use them in Hiccup vectors, []. All the way up to the call to render.

Do you mean this part:

(defn navigate [path]
  (let [new-content (route-component-map path)]
    (reset! state/current-content (new-content))
    (.pushState js/window.history nil "" path)))

Yes.

Wow, that actually fixed the problem

Thank you kindly sir. Could you explain or point me to where I can read the explanation?

Sure: https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md

Thanks!