Comments (3)
You can also prepend the 'for statement with 'doall
(defn bar []
[:div
(doall (for [i (range 1)]
[:p (@foo i)]))])
from reagent.
Could you just do
(into [:div]
(for [i (range 1)]
[:p (@foo i)]))
from reagent.
Those are very good questions, in the sense that I'm not sure of the answers to them yet :)
First the basic problem: since seqs in general are lazy, they are typically not evaluated in the function where they are declared. So if you have something like
(def foo (atom ["hello"]))
(defn bar []
[:div
(for [i (range 1)]
[:p (@foo i)])])
then foo
would never be deref'ed when bar
is run, but rather inside the :p
component (or possibly the :div
). Then obviously bar
doesn't know that it needs to re-run when foo
has changed, and general badness ensue.
This could be solved for most cases, by keeping track of the current "owner" component, and pass that along to children, so that when the seq is eventually evaluated, a dependency is added to, say, bar
. But getting that right for all cases is kind of a bitch. :)
And I can't really think of a case where you wouldn't be better off lifting the deref out of the for loop. That is better for performance, and makes it more obvious what happens.
The exception vs. warning question is also a good one. bar
would for example have been perfectly safe it it had looked like:
(defn bar []
@foo
[:div
(for [i (range 1)]
[:p (@foo i)])])
Then bar
is re-rendered when foo
changes, and everything works just fine. You just lose a tiny bit of performance from the extra deref. So maybe in this case it would have been a bit harsh to throw an exception β but I'm not 100% sure about that...
There can be other cases as well, if (for example) you're perfectly ok with the seq not being updated when the atom changes. I actually had that very case in the color palette demo here: http://holmsand.github.io/reagent/news/reagent-is-async.html
But even in that case, I would have been better off using explicit values, so the demo has now been changed β so in that case I appreciated the warning :)
So I'm still unsure if it is actually worth the extra complexity to allow derefs in seqs, and if it should be warning or exception when it happens. And since I'm not 100% sure, a warning seemed like the right thing to do.
Brilliant ideas are very much welcome. And maybe the warning could have better wording as well.
from reagent.
Related Issues (20)
- Bad react key warning when using false as key
- examples/material-ui not work HOT 1
- examples/material-ui not work HOT 1
- Docs on βChanged?β inaccurate? HOT 5
- React 18 does not live reload with Shadow-CLJS in non-trivial projects HOT 5
- Prop types
- `TypeError` when using function components with `r/create-class` with `dom.server/render-to-string`
- ReactDOM.render is no longer supported in React 18. Use createRoot instead. HOT 2
- shadow-cljs emits a warning when using with-let HOT 4
- Korean input broken on :input and :textarea HOT 1
- Update docs? HOT 1
- MUI ThemeProvider not working HOT 1
- @@ -62,6 +62,45 @@ class _Config { } } // eslint-disable-next-line valid-jsdoc /** * fetch problem title, level via solved.ac api * @see {@link https://solvedac.github.io/unofficial-documentation/#/operations/getProblemByIdArray} * @param {string[]} pids - list of problem id (up to 100) * @param { ({ problemId, titleKo, level }) => void } callback */ function fetchProblemsFromSolvedAc(pids, callback) { const query = encodeURIComponent(pids.join(',')); console.log(`https://solved.ac/api/v3/problem/lookup?problemIds=${query}`); fetch(`https://solved.ac/api/v3/problem/lookup?problemIds=${query}`) .then((res) => { console.log('fetchProblemsFromSolvedAc', res); return res; }) .then((res) => res.json()) .then(callback) .catch(() => callback(null)); }
- Readme says npm i or add deps to .edn but (in my case at least) needed both HOT 1
- Any interest in being able to replace `react/createElement` with a custom function? HOT 7
- The cursor disappears at the end of a controlled input on Chrome
- Reusable components following HTML semantics of Opional Attributes and Variadic Children HOT 3
- Controlled input loses cursor under ShadowRoot in React 18 HOT 3
- snake_case mentioned instead kebab-case in documentation of create-class function.
- Class name composition is harder than it needs to be
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reagent.