Home

Optimizations

https://github.com/r0man/sablono/wiki/Optimization-Tips

Use different React version

http://stackoverflow.com/questions/37320212/use-a-different-react-version-with-clojurescript-react-libraries-reagent-om-rum

Using React with addons

[rum "0.9.0" :exclusions [cljsjs/react cljsjs/react-dom]]
[cljsjs/react-dom "15.1.0-0" :exclusions [cljsjs/react]]
[cljsjs/react-dom-server "15.1.0-0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.1.0-0"]

Profiling with React perf

Specify the react-with-addons dependency in your project.clj (see above ↑)

Then from within your program run:

(js/React.addons.Perf.start)
;;run your app
(js/React.addons.Perf.stop)
(js/React.addons.Perf.printWasted)

and results will be printed to the developer console.

Using 3rd-party React components

Given e.g. react-router-transition

(defn route-transition [pathname children]
  (js/React.createElement js/RouteTransition
    #js { :pathname pathname
          :atEnter  #js { :opacity 0 }
          :atLeave  #js { opacity: 0 }
          :atActive #js { opacity: 1 } }
    (clj->js children)))

Another example react-component/slider

(defn range-slider [min max]
  (js/React.createElement js/Slider #js { :min min
                                          :max max
                                          :range true
                                          :defaultValue #js [40 60] }))

Get displayName of component

This might be useful for development when you want to know which component this mixin is handling:

(ns ...
  (:require [goog.object :as gobj]))

(defn display-name
  "Returns the displayname of the component"
  [state]
  (gobj/getValueByKeys
    (:rum/react-component state)
    "constructor"
    "displayName"))