Reagent
Reagent ClojureScript React wrapper patterns for building reactive SPAs with atoms and Hiccup syntax
Details
Language / Topic
ClojureCategory
framework
Compatible Frameworks
reagent
Rules
balanced
- Write components as ClojureScript functions returning Hiccup vectors: `(defn user-card [{:keys [name email]}] [:div.card [:h2 name] [:p email]])`.
- Hold mutable component state in `(r/atom initial-value)` — deref with `@atom` in the render function, mutate with `swap!` or `reset!`.
- Use `(r/create-class {:component-did-mount #(fetch-data!) :reagent-render render-fn})` for lifecycle hooks.
- Pass data as function arguments — lift to `r/atom` only state that must cause this component or its parents to re-render.
- Compose components in Hiccup with `[component-name props]` syntax — this delays evaluation and enables proper reactivity.
- Use `(r/cursor parent-atom [:path :key])` for reactive lenses into nested state — writes to the cursor propagate to the parent atom.
- Adapt React components: `(def MyChart (r/adapt-react-class js/ChartJS))` — pass props as a ClojureScript map `{:data chart-data}`.
- Avoid storing derived values in atoms — compute them in the render function or use `r/track` for memoized reactive derivations.