Fork me on GitHub
#reagent
<
2019-06-24
>
achikin14:06:19

Does anyone have an example of using reagent.dom.server/render-to-string? I need to render a piece of html to a string, but cant' figure out how to use the function

tavistock14:06:10

are you requiring react in the ns?

achikin14:06:29

(defn mycomp [a] [:div a])
(reagent.dom.server/render-to-static-markup [mycomp 1])
#object[TypeError TypeError: Cannot set property 'getCurrentStack' of undefined]

oskarkv15:06:07

I have a question about state and rerendering. Say I have a tree (of clojure data) of state in an atom. I would like to have my whole app state in one atom, because it's nice. Then, if only small thing at the bottom (in a leaf) changes, I would like only a single component to rerender. But if I have all my state in one atom, that won't be possible, because all the other components would either defer the atom to get the data they need each time they are called, or I could pass the tree, and subtrees, down into the children, but since something at the bottom has changed, everything will rerender. So it seems to prevent everything rerendering, I would need to put every little thing in its own atom. But that seems annoying. So, what should I do?

oskarkv15:06:38

Well, by "everything" I mean almost everything---everything that derefs in the case of using an atom, and in the case of passing arguments, everything that takes an ancestor of the leaf in the data tree.

lilactown15:06:29

this is a common perf question. cursors might be able to help with this

lilactown16:06:01

which is basically what re-frame does

oskarkv16:06:35

OK, I'll check those out, thanks

lilactown16:06:22

and just because it’s common, doesn’t mean it’s not a good question 😄 I meant it to mean that people are thinking a lot about this, honestly

lilactown16:06:52

the tradeoffs between keeping all your state in one global atom vs. local individual atoms, is being still being explored IMO

lilactown16:06:55

local atoms are very performant but have certain dev experience problems, one atom to rule them all is “nice” but you end up still needing to partition your state into these local slices that components can subscribe to

oskarkv16:06:48

Does this problem exist in pure React too?

oskarkv16:06:20

OK, I have only used React via Reagent 😛

lilactown16:06:51

😁 lucky you

oskarkv17:06:23

Oh, re-frame looks nice. Thanks for mentioning it @lilactown

lilactown17:06:16

👍 would recommend if you’re making a medium+ SPA

juhoteperi18:06:53

Rendering the whole tree shouldn't usually be a problem. Rendering from clojure data (atom) to React elements is very fast, and if DOM don't need changes there isn't much else to do. IF you need to calculate something in the render functions, that can become a performance problem, but in this case you can move the calculations to Reagent reactions or Re-frame subscriptions, so these only run when the input data changes, instead of each render.

juhoteperi18:06:36

It is also possible to use reactions or subscriptions to render components only when part of the tree changes, but that can have it's own problems. (For very large tree, creating thousands of reactions could end up being more expensive than just rendering the whole tree).

👏 4
oskarkv20:06:26

Oh, before I didn't think about the fact that react doesn't update the DOM unless components actually change. 😛

lilactown20:06:35

yep! the whole point of React is that it will take the components that render, and do a diff to find the most efficient way to update the DOM for you (if any updates need to occur at all!)