PageSourceSearch

https://reagent-project.github.io/

html reagent-project.github.io collected 2026-10-03 09:49:41 UTC 31,394 bytes, 156 lines download raw bytes

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">&quot;I am a component!&quot;</span><span style="color:#44a">]</span>
12   <span style="color:#44a">[</span><span style="color:blue">:p.someclass</span>
13    <span style="color:green">&quot;I have &quot;</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">&quot;bold&quot;</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">&quot;red&quot;</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">&quot; and red &quot;</span><span style="color:#272">]</span> <span style="color:green">&quot;text.&quot;</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">&quot;I include simple-component.&quot;</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">&quot;Hello, &quot;</span> name <span style="color:green">&quot;!&quot;</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">&quot;world&quot;</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">&quot;Item &quot;</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">&quot;Here is a list:&quot;</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">&quot;The atom &quot;</span> <span style="color:#44a">[</span><span style="color:blue">:code</span> <span style="color:green">&quot;click-count&quot;</span><span style="color:#44a">]</span> <span style="color:green">&quot; has value: &quot;</span>
53   @click-count <span style="color:green">&quot;. &quot;</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">&quot;button&quot;</span> <span style="color:blue">:value</span> <span style="color:green">&quot;Click me!&quot;</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">&quot;Seconds Elapsed: &quot;</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">&quot;text&quot;</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">-&gt;</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">&quot;foo&quot;</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">&quot;The value is now: &quot;</span> @val<span style="color:#940">]</span>
78       <span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">&quot;Change it here: &quot;</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">&quot;I am a component!&quot;</span><span style="color:#44a">]</span>
89   <span style="color:#44a">[</span><span style="color:blue">:p.someclass</span>
90    <span style="color:green">&quot;I have &quot;</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">&quot;bold&quot;</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">&quot;red&quot;</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">&quot; and red &quot;</span><span style="color:#272">]</span> <span style="color:green">&quot;text.&quot;</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">&quot;range&quot;</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">&quot;100%&quot;</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">-&gt;</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>&lt; bmi 18.5<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">&quot;orange&quot;</span> <span style="color:green">&quot;underweight&quot;</span><span style="color:#940">]</span>
118                          <span style="color:#940">(</span>&lt; bmi 25<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">&quot;inherit&quot;</span> <span style="color:green">&quot;normal&quot;</span><span style="color:#940">]</span>
119                          <span style="color:#940">(</span>&lt; bmi 30<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">&quot;orange&quot;</span> <span style="color:green">&quot;overweight&quot;</span><span style="color:#940">]</span>
120                          <span style="color:blue">:else</span> <span style="color:#940">[</span><span style="color:green">&quot;red&quot;</span> <span style="color:green">&quot;obese&quot;</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">&quot;BMI calculator&quot;</span><span style="color:#272">]</span>
123     <span style="color:#272">[</span><span style="color:blue">:div</span>
124      <span style="color:green">&quot;Height: &quot;</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">&quot;cm&quot;</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">&quot;Weight: &quot;</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">&quot;kg&quot;</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">&quot;BMI: &quot;</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">&quot; &quot;</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.