### Props Handling in HSX

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Illustrates how props are handled in HSX, mirroring Reagent's approach. It shows an example of an onClick handler and the expected translation to JavaScript object syntax.

```clojure
[:div {:on-click #(js/alert "Clicked!")}]
```

```clojure
[:div #js {"onClick" #(js/alert "Clicked!")}]
```

--------------------------------

### Create and Render HSX Component in ClojureScript

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Demonstrates how to define a simple HSX component using Hiccup syntax and render it into the DOM using React's createRoot. This example showcases the basic usage of HSX for building React UIs in ClojureScript.

```ClojureScript
(ns com.corp.my-hsx-ui
  (:require [io.factorhouse.hsx.core :as hsx]
            ["react-dom/client" :refer [createRoot]]))

;; This is a HSX component
(defn test-ui [props text]
  [:div props
   "Hello " text "!"])

(defonce root
  (createRoot (.getElementById js/document "app")))

(defn init []
  (.render root 
           (hsx/create-element 
             [test-ui {:on-click #(js/alert "Clicked!")} 
              "prospective HSX user"])))
```

--------------------------------

### Using HSX Components from JavaScript

Source: https://github.com/factorhouse/hsx/blob/main/README.md

HSX components can be exposed to JavaScript using `hsx/reactify-component`. This example demonstrates wrapping a component with React ErrorBoundary, making the HSX component usable within a JavaScript environment.

```clojure
(defn fallback-renderer 
  [{:keys [error]}]
  [:div (str "Something went wrong: " error)])

(defn with-error-boundary 
  [comp]
  [:> ErrorBoundary {:fallbackRender (hsx/reactify-component fallback-renderer)}
   (hsx/create-element comp)])

(defn my-ui []
  [with-error-boundary 
   [:div "This is my application..."]])
```

--------------------------------

### HSX Core Functions Mapping from Reagent

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Provides a mapping of commonly used Reagent core functions to their equivalent HSX counterparts. This table is useful for developers migrating from Reagent to HSX, highlighting the direct replacements for component creation and reactivity.

```APIDOC
Reagent Function | HSX Equivalent
-------------------|-----------------------------
`reagent.core/as-element` | `io.factorhouse.hsx.core/create-element`
`reagent.core/reactify-component` | `io.factorhouse.hsx.core/reactify-component`
`reagent.core/create-element` | `react/createElement`
```

--------------------------------

### Component Metadata (Keys)

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Demonstrates how to pass React keys to components in HSX using Clojure metadata, similar to Reagent.

```clojure
(defn component-with-seq []
  [:ol {:className "bg-slate-500"}
   (for [item items]
     ^{:key (str "item-" (:id item))}
     [item-component item])])
```

--------------------------------

### ID and ClassName Shorthands

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Shows the shorthand syntax for specifying element IDs and class names in HSX, which is consistent with Reagent and Hiccup.

```clojure
[:div#foo ...] ;; => [:div {:id "foo"}]
```

```clojure
[:div.foo.bar ...] ;; => [:div {:className "foo bar"}]
```

--------------------------------

### Hot-reloading with shadow-cljs

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Provides a ClojureScript code snippet for enabling hot-reloading with shadow-cljs by clearing the component cache.

```clojure
(defn ^:dev/after-load reload []
  (hsx/memo-clear!))
```

--------------------------------

### HSX Fragments and JavaScript Components

Source: https://github.com/factorhouse/hsx/blob/main/README.md

HSX supports fragments using the :<> syntax, similar to Reagent. JavaScript components can be called using the :> syntax, with an option to bypass prop serialization by passing a JS Object.

```clojure
(defn list-of-things [] 
  [:<> 
   [:div "First thing"]
   [:div "Second thing"]])
```

```clojure
(defn dropdown-example [options] 
  [:> Select {:on-change #(js/alert "Data changed")
              :options options}])
```

```clojure
(defn dropdown-example [options] 
  [:> Select #js {"onChange" #(js/alert "Data changed") 
                  "options" options}])
```

--------------------------------

### Local State Management: Reagent vs HSX

Source: https://github.com/factorhouse/hsx/blob/main/README.md

Demonstrates how to manage local state in components using Reagent's atom and React's useState hook. HSX components are function components, encouraging the use of useState for local state.

```clojure
;; (:require ["react" :as react])

(defn reagent-component-with-local-state []
  (let [state (reagent.core/atom 1)]
    (fn []
      [:div {:on-click #(swap! state inc)} 
       "The value of state is " @state])))
```

```clojure
(defn hsx-component-with-local-state []
  (let [[state set-state] (react/useState 1)]
    [:div {:on-click #(set-state inc)} 
     "The value of state is " state]))
```

--------------------------------

### HSX Component Memoization

Source: https://github.com/factorhouse/hsx/blob/main/README.md

HSX components are memoized by default using React.memo with a ClojureScript-compatible equality predicate. Memoization can be disabled globally via closure-defines or per-component using metadata. Custom equality predicates can also be provided.

```clojure
{... :builds {{:app {:target :browser :modules {{:app {{:entries [your.app]}}}} :closure-defines {io.factorhouse.hsx.core/USE_MEMO false}}}}}
```

```clojure
[:div ^{:memo? false} [my-hsx-comp arg1 arg2]]
```

```clojure
(defn custom-are-props-equal-pred
  [[prev-arg1 _prev-arg2] [next-arg1 _next-arg2]]
  (= (:foo prev-arg1) (:foo next-arg1)))

[:div
 ^{:memo? true :memo/predicate custom-are-props-equal-pred}
 [my-hsx-comp arg1 arg2]]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.