1<!doctype html> 2<html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Reagent: Minimalistic React for ClojureScript</title><base/><link href="css/built.css?c4ca2a" rel="stylesheet"/></head><body><div id="main-content"><div><link rel="preload" as="image" href="https://github.blog/wp-content/uploads/2008/12/forkme_left_orange_ff7600.png"/><div><div class="nav"><ul class="nav"><li class="brand"><a href="index.html">Reagent:</a></li><li><a href="index.html">Intro</a></li><li><a href="news/index.html">News</a></li><li><a href="https://github.com/reagent-project/reagent">GitHub</a></li><li><a href="http://reagent-project.github.io/docs/master/">API</a></li></ul></div><div class="reagent-demo"><h1>Reagent: Minimalistic React for ClojureScript</h1><div class="demo-text"><h2>Introduction to Reagent</h2><p><a href="https://github.com/reagent-project/reagent">Reagent</a> provides a minimalistic interface 3 between <a href="https://github.com/clojure/clojurescript">ClojureScript</a> and <a href="https://reactjs.org/">React</a>. It allows you to define efficient React 4 components using nothing but plain ClojureScript functions and 5 data, that describe your UI using a <a href="https://github.com/weavejester/hiccup">Hiccup</a>-like 6 syntax.</p><p>The goal of Reagent is to make it possible to define 7 arbitrarily complex UIs using just a couple of basic concepts, 8 and to be fast enough by default that you rarely have to think 9 about performance.</p><p>A very basic Reagent component may look something like this: </p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>I am a component!</p><p class="someclass">I have <strong>bold</strong><span style="color:red"> and red </span>text.</p></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> simple-component <span style="color:#940">[</span><span style="color:#940">]</span> 10 <span style="color:#940">[</span><span style="color:blue">:div</span> 11 <span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I am a component!"</span><span style="color:#44a">]</span> 12 <span style="color:#44a">[</span><span style="color:blue">:p.someclass</span> 13 <span style="color:green">"I have "</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">"bold"</span><span style="color:#272">]</span> 14 <span style="color:#272">[</span><span style="color:blue">:span</span> <span style="color:#940">{</span><span style="color:blue">:style</span> <span style="color:#44a">{</span><span style="color:blue">:color</span> <span style="color:green">"red"</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">" and red "</span><span style="color:#272">]</span> <span style="color:green">"text."</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p>You can build new components using other components as 15 building blocks. Like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>I include simple-component.</p><div><p>I am a component!</p><p class="someclass">I have <strong>bold</strong><span style="color:red"> and red </span>text.</p></div></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> simple-parent <span style="color:#940">[</span><span style="color:#940">]</span> 16 <span style="color:#940">[</span><span style="color:blue">:div</span> 17 <span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I include simple-component."</span><span style="color:#44a">]</span> 18 <span style="color:#44a">[</span>simple-component<span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p>Data is passed to child components using plain old Clojure 19 data types. Like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><p>Hello, <!-- -->world<!-- -->!</p></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> hello-component <span style="color:#940">[</span>name<span style="color:#940">]</span> 20 <span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"Hello, "</span> name <span style="color:green">"!"</span><span style="color:#940">]</span><span style="color:#272">)</span> 21 22<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> say-hello <span style="color:#940">[</span><span style="color:#940">]</span> 23 <span style="color:#940">[</span>hello-component <span style="color:green">"world"</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p><strong>Note: </strong>In the example above, <code>hello-component</code> might just 24 as well have been called as a normal Clojure function instead of 25 as a Reagent component, i.e with parenthesis instead of square 26 brackets. The only difference would have been performance, since 27 ârealâ Reagent components are only re-rendered when their data 28 have changed. More advanced components though (see below) must 29 be called with square brackets.</p><p>Here is another example that shows items in a <code>seq</code>:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>Here is a list:<ul><li>Item <!-- -->0</li><li>Item <!-- -->1</li><li>Item <!-- -->2</li></ul></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> lister <span style="color:#940">[</span>items<span style="color:#940">]</span> 30 <span style="color:#940">[</span><span style="color:blue">:ul</span> 31 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">for</span> <span style="color:#272">[</span>item items<span style="color:#272">]</span> 32 ^<span style="color:#272">{</span><span style="color:blue">:key</span> item<span style="color:#272">}</span> <span style="color:#272">[</span><span style="color:blue">:li</span> <span style="color:green">"Item "</span> item<span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">]</span><span style="color:#272">)</span> 33 34<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> lister-user <span style="color:#940">[</span><span style="color:#940">]</span> 35 <span style="color:#940">[</span><span style="color:blue">:div</span> 36 <span style="color:green">"Here is a list:"</span> 37 <span style="color:#44a">[</span>lister <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">range</span> 3<span style="color:#272">)</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p><strong>Note: </strong>The <code>^{:key item}</code> part above isnât really necessary 38 in this simple example, but attaching a unique key to every item 39 in a dynamically generated list of components is good practice, 40 and helps React to improve performance for large lists. The key 41 can be given either (as in this example) as meta-data, or as a <code>:key</code> item in the first argument to a component (if it 42 is a map). See Reactâs <a href="https://reactjs.org/docs/lists-and-keys.html#keys">documentation</a> 43 for more info.</p></div><div class="demo-text"><h2>Managing state in Reagent</h2><p>The easiest way to manage state in Reagent is to use Reagentâs 44 own version of <code>atom</code>. It works exactly like the one in 45 clojure.core, except that it keeps track of every time it is 46 derefâed. Any component that uses an <code>atom</code> is automagically 47 re-rendered when its value changes.</p><p>Letâs demonstrate that with a simple example:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>The atom <code>click-count</code> has value: <!-- -->0<!-- -->. <input type="button" value="Click me!"/></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span> 48 <span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">def</span> <span style="color:#5050c0;font-weight:bold">click-count</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">r/atom</span> 0<span style="color:#940">)</span><span style="color:#272">)</span> 49 50<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> counting-component <span style="color:#940">[</span><span style="color:#940">]</span> 51 <span style="color:#940">[</span><span style="color:blue">:div</span> 52 <span style="color:green">"The atom "</span> <span style="color:#44a">[</span><span style="color:blue">:code</span> <span style="color:green">"click-count"</span><span style="color:#44a">]</span> <span style="color:green">" has value: "</span> 53 @click-count <span style="color:green">". "</span> 54 <span style="color:#44a">[</span><span style="color:blue">:input</span> <span style="color:#272">{</span><span style="color:blue">:type</span> <span style="color:green">"button"</span> <span style="color:blue">:value</span> <span style="color:green">"Click me!"</span>
55 <span style="color:blue">:on-click</span> #<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">swap!</span> click-count <span style="color:#687868;font-weight:bold">inc</span><span style="color:#940">)</span><span style="color:#272">}</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></pre></div></div><p>Sometimes you may want to maintain state locally in a 56 component. That is easy to do with an <code>atom</code> as well.</p><p>Here is an example of that, where we call <code>setTimeout</code> every time the component is rendered to 57 update a counter:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>Seconds Elapsed: <!-- -->0</div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">timer-component</span> <span style="color:#940">[</span><span style="color:#940">]</span> 58 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>seconds-elapsed <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/atom</span> 0<span style="color:#272">)</span><span style="color:#44a">]</span> 59 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#272">[</span><span style="color:#272">]</span> 60 <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">js/setTimeout</span> #<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">swap!</span> seconds-elapsed <span style="color:#687868;font-weight:bold">inc</span><span style="color:#940">)</span> 1000<span style="color:#272">)</span> 61 <span style="color:#272">[</span><span style="color:blue">:div</span> 62 <span style="color:green">"Seconds Elapsed: "</span> @seconds-elapsed<span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></div></div><p>The previous example also uses another feature of Reagent: a 63 component function can return another function, that is used to do 64 the actual rendering. This function is called with the same 65 arguments as the first one.</p><p>This allows you to perform some setup of newly created 66 components without resorting to Reactâs lifecycle events.</p><p>By simply passing an <code>atom</code> around you can share 67 state management between components, like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>The value is now: <!-- -->foo</p><p>Change it here: <input type="text" value="foo"/></p></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span> 68 <span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> atom-input <span style="color:#940">[</span>value<span style="color:#940">]</span> 69 <span style="color:#940">[</span><span style="color:blue">:input</span> <span style="color:#44a">{</span><span style="color:blue">:type</span> <span style="color:green">"text"</span> 70 <span style="color:blue">:value</span> @value 71 <span style="color:blue">:on-change</span> #<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">reset!</span> value <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">-></span> <span style="color:#687868;font-weight:bold">%</span> .-target .-value<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">}</span><span style="color:#940">]</span><span style="color:#272">)</span> 72 73<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">shared-state</span> <span style="color:#940">[</span><span style="color:#940">]</span> 74 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>val <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/atom</span> <span style="color:green">"foo"</span><span style="color:#272">)</span><span style="color:#44a">]</span> 75 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#272">[</span><span style="color:#272">]</span>
76 <span style="color:#272">[</span><span style="color:blue">:div</span> 77 <span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"The value is now: "</span> @val<span style="color:#940">]</span> 78 <span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"Change it here: "</span> <span style="color:#44a">[</span>atom-input val<span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></pre></div></div><p><strong>Note: </strong>Component functions can be called with any 79 arguments â as long as they are immutable. You <em>could</em> use 80 mutable objects as well, but then you have to make sure that the 81 component is updated when your data changes. Reagent assumes by 82 default that two objects are equal if they are the same object.</p></div><div class="demo-text"><h2>Essential API</h2><p>Reagent supports most of Reactâs API, but there is really only 83 one entry-point that is necessary for most applications: <code>reagent.dom/render</code>.</p><p>It takes two arguments: a component, and a DOM node. For 84 example, splashing the very first example all over the page would 85 look like this:</p><div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span> 86 <span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.dom <span style="color:blue">:as</span> rdom<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> simple-component <span style="color:#940">[</span><span style="color:#940">]</span> 87 <span style="color:#940">[</span><span style="color:blue">:div</span> 88 <span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I am a component!"</span><span style="color:#44a">]</span> 89 <span style="color:#44a">[</span><span style="color:blue">:p.someclass</span> 90 <span style="color:green">"I have "</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">"bold"</span><span style="color:#272">]</span> 91 <span style="color:#272">[</span><span style="color:blue">:span</span> <span style="color:#940">{</span><span style="color:blue">:style</span> <span style="color:#44a">{</span><span style="color:blue">:color</span> <span style="color:green">"red"</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">" and red "</span><span style="color:#272">]</span> <span style="color:green">"text."</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></pre></div></div></div><div class="demo-text"><h2>Putting it all together</h2><p>Here is a slightly less contrived example: a simple BMI 92 calculator.</p><p>Data is kept in a single <code>reagent.core/atom</code>: a map 93 with height, weight and BMI as keys.</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><h3>BMI calculator</h3><div>Height: <!-- -->180<!-- -->cm<input type="range" min="100" max="220" style="width:100%" value="180"/></div><div>Weight: <!-- -->80<!-- -->kg<input type="range" min="30" max="150" style="width:100%" value="80"/></div><div>BMI: <!-- -->24<!-- --> <span style="color:inherit">normal</span><input type="range" min="10" max="50" style="width:100%" value="24.691358024691358"/></div></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span> 94 <span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">calc-bmi</span> <span style="color:#940">[</span><span style="color:#44a">{</span><span style="color:blue">:keys</span> <span style="color:#272">[</span>height weight bmi<span style="color:#272">]</span> <span style="color:blue">:as</span> data<span style="color:#44a">}</span><span style="color:#940">]</span> 95 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>h <span style="color:#272">(</span>/ height 100<span style="color:#272">)</span><span style="color:#44a">]</span> 96 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">if</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">nil?</span> bmi<span style="color:#272">)</span>
97 <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">assoc</span> data <span style="color:blue">:bmi</span> <span style="color:#940">(</span>/ weight <span style="color:#44a">(</span>* h h<span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span> 98 <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">assoc</span> data <span style="color:blue">:weight</span> <span style="color:#940">(</span>* bmi h h<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span> 99 100<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">def</span> <span style="color:#5050c0;font-weight:bold">bmi-data</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">r/atom</span> <span style="color:#44a">(</span>calc-bmi <span style="color:#272">{</span><span style="color:blue">:height</span> 180 <span style="color:blue">:weight</span> 80<span style="color:#272">}</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span> 101 102<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> slider <span style="color:#940">[</span>param value min max invalidates<span style="color:#940">]</span> 103 <span style="color:#940">[</span><span style="color:blue">:input</span> <span style="color:#44a">{</span><span style="color:blue">:type</span> <span style="color:green">"range"</span> <span style="color:blue">:value</span> value <span style="color:blue">:min</span> min <span style="color:blue">:max</span> max 104 <span style="color:blue">:style</span> <span style="color:#272">{</span><span style="color:blue">:width</span> <span style="color:green">"100%"</span><span style="color:#272">}</span> 105 <span style="color:blue">:on-change</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#940">[</span>e<span style="color:#940">]</span> 106 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>new-value <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">js/parseInt</span> <span style="color:#940">(</span>.. e -target -value<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">]</span> 107 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">swap!</span> bmi-data 108 <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#940">[</span>data<span style="color:#940">]</span> 109 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">-></span> data 110 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">assoc</span> param new-value<span style="color:#44a">)</span> 111 <span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">dissoc</span> invalidates<span style="color:#44a">)</span> 112 calc-bmi<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">}</span><span style="color:#940">]</span><span style="color:#272">)</span> 113 114<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/defc</span> bmi-component <span style="color:#940">[</span><span style="color:#940">]</span> 115 <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span><span style="color:#272">{</span><span style="color:blue">:keys</span> <span style="color:#940">[</span>weight height bmi<span style="color:#940">]</span><span style="color:#272">}</span> @bmi-data
116 <span style="color:#272">[</span>color diagnose<span style="color:#272">]</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">cond</span> 117 <span style="color:#940">(</span>< bmi 18.5<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"orange"</span> <span style="color:green">"underweight"</span><span style="color:#940">]</span> 118 <span style="color:#940">(</span>< bmi 25<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"inherit"</span> <span style="color:green">"normal"</span><span style="color:#940">]</span> 119 <span style="color:#940">(</span>< bmi 30<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"orange"</span> <span style="color:green">"overweight"</span><span style="color:#940">]</span> 120 <span style="color:blue">:else</span> <span style="color:#940">[</span><span style="color:green">"red"</span> <span style="color:green">"obese"</span><span style="color:#940">]</span><span style="color:#272">)</span><span style="color:#44a">]</span> 121 <span style="color:#44a">[</span><span style="color:blue">:div</span> 122 <span style="color:#272">[</span><span style="color:blue">:h3</span> <span style="color:green">"BMI calculator"</span><span style="color:#272">]</span> 123 <span style="color:#272">[</span><span style="color:blue">:div</span> 124 <span style="color:green">"Height: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> height<span style="color:#940">)</span> <span style="color:green">"cm"</span> 125 <span style="color:#940">[</span>slider <span style="color:blue">:height</span> height 100 220 <span style="color:blue">:bmi</span><span style="color:#940">]</span><span style="color:#272">]</span> 126 <span style="color:#272">[</span><span style="color:blue">:div</span> 127 <span style="color:green">"Weight: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> weight<span style="color:#940">)</span> <span style="color:green">"kg"</span> 128 <span style="color:#940">[</span>slider <span style="color:blue">:weight</span> weight 30 150 <span style="color:blue">:bmi</span><span style="color:#940">]</span><span style="color:#272">]</span> 129 <span style="color:#272">[</span><span style="color:blue">:div</span> 130 <span style="color:green">"BMI: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> bmi<span style="color:#940">)</span> <span style="color:green">" "</span> 131 <span style="color:#940">[</span><span style="color:blue">:span</span> <span style="color:#44a">{</span><span style="color:blue">:style</span> <span style="color:#272">{</span><span style="color:blue">:color</span> color<span style="color:#272">}</span><span style="color:#44a">}</span> diagnose<span style="color:#940">]</span> 132 <span style="color:#940">[</span>slider <span style="color:blue">:bmi</span> bmi 10 50 <span style="color:blue">:weight</span><span style="color:#940">]</span><span style="color:#272">]</span><span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></pre></div></div></div><div class="demo-text"><h2>Performance</h2><p>React itself is very fast, and so is Reagent. In fact, Reagent 133 will be even faster than plain React a lot of the time, thanks to 134 optimizations made possible by ClojureScript.</p><p>Mounted components are only re-rendered when their parameters 135 have changed. The change could come from a derefâed <code>atom</code>, the arguments passed to the component or 136 component state.</p><p>All of these are checked for changes with <code>identical?</code> which is basically only a pointer 137 comparison, so the overhead is very low. Maps passed as arguments 138 to components are compared the same way: they are considered equal 139 if all their entries are identical. This also applies to built-in 140 React components like <code>:div</code>, <code>:p</code>, etc.</p><p>All this means that you simply wonât have to care about 141 performance most of the time. Just define your UI however you like 142 â it will be fast enough.</p><p>There are a couple of situations that you might have to care 143 about, though. If you give Reagent a big <code>seq</code> of 144 components to render, you might have to supply all of them with a 145 unique <code>:key</code> attribute to speed up rendering (see 146 above). Also note that anonymous functions are not, in general, 147 equal to each other even if they represent the same code and 148 closure.</p><p>But again, in general you should just trust that React and 149 Reagent will be fast enough. This very page is composed of a single 150 Reagent component with thousands of child components (every single 151 parenthesis etc in the code examples is a separate component), and 152 yet the page can be updated many times every second without taxing 153 the browser the slightest.</p><p>Incidentally, this page also uses another React trick: the 154 entire page is pre-rendered using Node, and <code>reagent.dom.server/render-to-string</code>. When it is loaded 155 into the browser, React automatically attaches event-handlers to 156 the already present DOM tree.</p></div></div><a href="https://github.com/reagent-project/reagent" class="github-badge"><img width="149" height="149" style="position:absolute;top:0;left:0;border:0" alt="Fork me on GitHub" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_orange_ff7600.png"/></a></div></div></div>
156<script>var pageConfig = {"page-path":"/index.html"}</script>
156<script src="js/main.js?93d774" type="text/javascript"></script>
156</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.