Fork me on GitHub
#re-frame
<
2018-11-09
>
myguidingstar04:11:29

I have a cofx handler that must produce data from an async operation (a js promise). How do I do that?

mikethompson04:11:43

I'd use the same approach as re-frame-http

myguidingstar05:11:17

hmm, re-frame-http is fx a handler, I want a cofx

mikethompson05:11:52

Oh right. Sorry. cofx can't be async

mikethompson05:11:33

events have to be handled, right there and then. There's no pausing, waiting.

mikethompson05:11:16

In practice this is never a problem, but you might need to think about your problem in a slightly different way

valtteri05:11:40

I found this clarifying (from re-frame docs) > coeffects is the current state of the world, as data If there was something async going on, it wouldn’t be about “current state” but some uncertain future state of the World. 🙂 That would make it more difficult to reason about. It’s simpler if events are the (only?) source for side-effects.

mkvlr09:11:21

is there anything special I need to do to reload a subscription via the repl? I’m trying out a new workflow without figwheel reloading but just reloading code in the repl or is this generally a bad idea? I noticed that code changes in event handlers are picked up, but not in subscriptions.

mkvlr09:11:06

ah, I see, I need to call (re-frame.subs/clear-subscription-cache!)

folcon12:11:37

Hey, any good resources that anyone can point me to that breaks down improving performance in re-frame?

folcon12:11:35

I’ve gone over the usual suspects 😃 -> 1) https://github.com/Day8/re-frame/blob/master/docs/Performance-Problems.md 2) https://github.com/Day8/re-frame/blob/master/docs/SubscriptionsCleanup.md Some of it’s still a bit overwhelming, if anyone can point at more things that I can look at it would be really helpful =)… I’m pretty sure there’s more I can do.

Braden Shepherdson15:11:13

@folcon I'm not aware of any other documents, but maybe describe your problems here and see if anyone here has tips?

folcon15:11:32

Ok, so I’ve written a fair sized app, and it’s pulling in a lot of external data, so working out at a high level what areas slow-downs are coming from so I can investigate further would be useful.

folcon15:11:08

I’m using the 10x, but it’s surprisingly hard to find issues unless I load in a lot of data, and then doing any kind of careful exploration is really problematic…

folcon15:11:23

Just wondering if anyone has had some good pointers of things to try?

Braden Shepherdson16:11:00

what's bad about your performance? slow view updates, memory use, CPU spinning?

👍 4
llsouder17:11:01

If my [:input {:type :text... has a value that is subscribed to and and :on-change that updates that value: Did I just create a an infinite loop? It seems to work but I am not comfortable with this code. Here is a gist with a sample https://gist.github.com/llsouder/971f21f8a5aea4bfd114f017a9418a2b

valtteri17:11:26

It’s fine.

valtteri17:11:15

There’s no loop. It just keeps the state consistent between app-db and the input. This is very common in React world.

✔️ 4
llsouder17:11:51

Is the reason there is "no loop" because the on-change dispatch value is the value in the text box so the subscribe doesn't trigger a render? Or does the text box stop a loop condition because the subscribe sets the value but then on-change is "not a change" so "no loop"?

valtteri18:11:19

When you type a in the input, it goes to app-db and subscription reads it from there and sets components value to a and it settles there.

valtteri18:11:59

In this case app-db contains the ‘truth’ about components state and not the input itself. In React world these are called “controlled components” https://reactjs.org/docs/forms.html#controlled-components

👍 4
llsouder20:11:21

thank you, your explanation and the link answered a lot of my question, present and future. 😄

👍 4
folcon17:11:29

@braden.shepherdson Slow view updates and memory use are two big ones, I’ve done some fixes on cpu spinning by chunking work. A lot of react missing keys issues I’ve “fixed” by doing ->

(into [:div] (for [item @subscription] [:div ...]))
(Not that I’m certain it’s a good idea, but it worked.)

folcon17:11:10

One thing that’s currently on my list is working out a good way of batching up datascript transact’s.

folcon17:11:27

But I think that won’t be too big an issue :)…

mikerod17:11:42

@folcon that doesn’t fix missing keys issue in terms of perf. React keys exists for more efficient diff’ing

mikerod17:11:10

So if you just don’t do them, you don’t get the perf improvement. I’d prefer the into like you have when there is no need for this perf boost

mikerod17:11:26

But if it is a large list of dynamically changing items, keys may become important

mikerod17:11:06

But they must be identifying keys. Not just positions in the sequence when things are changing the sequence in arbitrary positions later

mikerod17:11:12

So a static sort of list that isn’t going to benefit from this (doesn’t really change much across renders and/or is not very big), into is fine. I have no idea your situations though.

folcon17:11:21

It does assign a vector index value to the dom object right? I’m pulling a large number of items out of datomic, so I should be able to use :db/id, but I’m concerned about values with the same key in different parts of the dom…

mikerod17:11:05

The vector index doesn’t help though if indices change

mikerod17:11:04

The react key identifier is only a local identifier for that particular children component array

mikerod17:11:16

You are concerned about global uniqueness?

mikerod17:11:32

It’s not a DOM element ID

folcon17:11:22

Ok, so just needs to be unique at the given level in the dom tree? I should probably swap to using db/id everywhere then.

folcon17:11:33

Thanks =)…

mikerod17:11:32

Yeah. Should be safe

mikerod17:11:36

For a react key

mikerod17:11:20

https://reactjs.org/docs/lists-and-keys.html#keys The couple paragraphs here explain it pretty well. But a key is only useful in the context of the surrounding sibling components.

folcon17:11:26

Ok, that makes sense.

4
folcon17:11:12

Are there any gotcha’s with regards to memory?

folcon17:11:58

The app I’ve written is pretty heavyweight and I’m really trying to see if there’s any obvious other things I’ve missed 😃

Braden Shepherdson18:11:29

one step would just be to estimate the total size of your Datascript blob.

Braden Shepherdson18:11:42

sometimes you're using your memory to store actual data, and not just overhead 😄

folcon18:11:47

Valid point :)… It’s somewhat dependant on the user, but I’ve seen users query for 5 to 50mb blobs