What is :<> in reagent hiccup?

Question

I don't understand the tag ":<>" in the following code clojure re-frame todomvc

(defn todo-app
  []
  [:<>
   [:section#todoapp
    [task-entry]
    (when (seq @(subscribe [:todos]))
      [task-list])
    [footer-controls]]
   [:footer#info
    [:p "Double-click to edit a todo"]]])

Can anyone help me on this?

Answer 1

That is creating a React Fragment:

https://reactjs.org/docs/fragments.html

Answer 2

Adding a bit more detail to the previous answer, the fragment gets spliced into a surrounding list instead of creating a child element. In this way, it is similar to the unquoted-splicing operator in Clojure ~@ compared to the regular unquote operator ~. An example:

(defn middle-seq       [] [    :d :e :f])
(defn middle-seq-frag  [] [:<> :d :e :f])

When used to create a Reagent component, we see the difference:

[:a :b :c (middle-seq)      :g :h :i]    ;=> [:a :b :c [:d :e :f] :g :h :i]
[:a :b :c (middle-seq-frag) :g :h :i]    ;=> [:a :b :c  :d :e :f  :g :h :i]

Otherwise, you would have to restructure the input and use concat:

(vec
  (concat
    [:a :b :c]
    (middle-seq) 
    [:g :h :i] ))          ;=> [:a :b :c :d :e :f :g :h :i]