Clojurians Log v2
Clojure programming
Channels
Apps
reagent
2024-09-13T08:53:45.761089Z
What am I misunderstanding about unique keys in a seq here. This is my whole app so far, and I'm already getting warning
(defn day-row [day month year]
(let [key (str "row-" day "-" month "-" year)]
[:div
{:key key}
(str key)]))
(defn app []
(let [current-month 9
current-year 2024
days-in-month 30]
[:div
(for [day (range 1 (inc days-in-month))]
[day-row day current-month current-year])]))
(defn ^:dev/after-load start []
(dom/render [app]
(.getElementById js/document "app")))
(defn ^:export init []
(js/console.log "Initializing app")
(start))
(defonce initialize (rf/dispatch-sync [:initialize]))
juhoteperi 2024-09-13T08:58:04.655089Z
Key has to be defined on the element which uses the component, it can't be set inside a component
juhoteperi 2024-09-13T08:58:24.285539Z
So
^{:key key}
[day-row day current-month current-year]juhoteperi 2024-09-13T08:59:02.375519Z
In your code :div element has a key, but it doesn't matter because the :div isn't the element in the seq
2024-09-13T09:00:02.483949Z
thank you, that makes sense and has fixed my issue! 👍
Harold 2024-09-13T14:33:18.512739Z
There is a nice pattern with into for this case, which obviates the need for :key in many cases.
Consider this implementation of app :
(defn app []
(let [current-month 9
current-year 2024
days-in-month 30]
(into [:div]
(for [day (range 1 (inc days-in-month))]
[day-row day current-month current-year]))))
lilactown 2024-09-13T17:37:41.576809Z
for dynamic lists, keys are important for performance and consistency reasons, you shouldn't get around them by using into.
👍 1
🙂 1
lilactown 2024-09-13T17:38:53.366009Z
for instance if you remove an element in the middle of the list, or reorder the list, React can avoid reconstructing the entire element tree if the keys are kept consistent. if you always return a "new" list of elements then it has to remount the entire list
👍 1
🙂 1
DrLjótsson 2024-09-13T20:41:01.118769Z
I have never understood why into makes keys “unnecessary”. What are the conditions when react complains about missing keys, and how does the into trick solve that? And why can’t components include the key like in the example?
👍 1
🙂 1
lilactown 2024-09-14T00:33:13.606799Z
to answer the first question: when reagent converts your hiccup data to React elements, it converts all [:div [:span ,,,]] etc. into objects that React understands to represent DOM nodes.
"static" children like
[:div
[:span "foo"] [:span "bar"] [:span "baz]][:div
(for [word ["foo" "bar" "baz"]]
[:span word])for
Since the collection is actually static, it's trivial to rewrite it to the first snippet. However, if you wanted to "get around" needing keys for a dynamic collection, you could use into to construct hiccup data similar to the first snippet but not require keys
(into [:div] (for [word ["foo" "bar" "baz"]]
[:span word]))
;; => [:div [:span "foo"] [:span "bar"] [:span "baz"]]🙏 1
lilactown 2024-09-14T00:42:48.274819Z
the second question is more complex to succinctly explain the "why?" in a slack message but suffice to say that keys must be associated with the elements in a collection without having to render the components associated with the elements
👍 1
DrLjótsson 2024-09-14T11:41:28.510979Z
Thanks @lilactown!