Reagent React Wrapper Components

1. Overview

Reagent provides a minimalist interface for building React components in ClojureScript, while Re-frame adds an application architecture layer for managing state and side effects.

2. Background

verified · pilot-annotation-pass · 2026-10-08

Reagent was created by Dan Holmsand in 2013 as a simple way to use React from ClojureScript, representing components as plain functions returning Hiccup-style vectors. Re-frame, developed by Mike Thompson starting in 2015, builds on Reagent to provide a unidirectional data flow architecture inspired by Elm and Redux.

3. Key Concepts

3.1. Reagent Component Forms

Three ways to define components with different lifecycle behaviors:

;; Form-1: Simple function (re-renders on any change)
(defn greeting [name]
  [:div "Hello, " name])

;; Form-2: Function returning function (closure for local state)
(defn counter []
  (let [count (reagent/atom 0)]
    (fn []
      [:div
       [:span @count]
       [:button {:on-click #(swap! count inc)} "+"]])))

;; Form-3: Full lifecycle (for React interop)
(defn canvas-component []
  (reagent/create-class
   {:component-did-mount (fn [this] (setup-canvas (reagent/dom-node this)))
    :reagent-render (fn [] [:canvas])}))

3.2. Re-frame Architecture

Event-driven state management with subscriptions and effects:

;; Event handler
(re-frame/reg-event-db
 :increment
 (fn [db [_ amount]]
   (update db :count + amount)))

;; Subscription
(re-frame/reg-sub
 :count
 (fn [db _]
   (:count db)))

;; Component using subscription
(defn counter-display []
  (let [count @(re-frame/subscribe [:count])]
    [:div "Count: " count]))

3.3. Wrapping React Libraries

corrected · pilot-annotation-pass · 2026-10-08

Adapt JavaScript React components for Reagent:

(def MaterialButton
  (reagent/adapt-react-class
   (.-Button (js/require "@material-ui/core"))))

(defn my-button []
  [MaterialButton {:variant "contained" :color "primary"}
   "Click Me"])

3.4. Component Composition Patterns

;; Higher-order component
(defn with-loading [component]
  (fn [props]
    (if (:loading props)
      [:div.spinner "Loading..."]
      [component props])))

;; Render props pattern
(defn mouse-tracker [render-fn]
  (let [pos (reagent/atom {:x 0 :y 0})]
    (fn []
      [:div {:on-mouse-move #(reset! pos {:x (.-clientX %)
                                          :y (.-clientY %)})}
       [render-fn @pos]])))

4. Implementation

4.1. Project Dependencies