Fork me on GitHub
#re-frame
<
2022-10-11
>
Gerome15:10:15

Hello! On the topic of counters: I have a list of items and when the user adds/removes a bunch of items, I want a counter to count up or down with an animation. https://css-tricks.com/animating-number-counters/ but since I need the counter to change at runtime based on user input and to a value that is only determined at runtime, I think, I can only solve this using CLJS. Now, the question. Am I going to run into rendering issues with reagent/re-frame, if I do this in a side effect using requestWindowAnimationFrame?

Gerome15:10:32

To be honest, I'm not even sure I can do this with requestWindowAnimationFrame and I'd also like to know if anyone has suggestions on how to address this. Maybe I need to prototype a little first.

p-himik16:10:33

> I'm not even sure I can do this with requestWindowAnimationFrame Why not?

Gerome06:10:50

Well, at first I was thinking about doing this in a side-effect. More precisely, I would write a function that manipulates the DOM, i,e, changes the number value, inside requestWindowAnimationFrame and execute that function in an effect handler. However, that feels weird to me because I would mess around with the DOM outside of react/reagent, which works and is in this case just a minor issue but it also feels like having state outside of re-frame. There is some risk here. I'll just try and see if it works.

p-himik09:10:22

> feels like having state outside of re-frame Would you consider this a state though? Something being displayed on screen doesn't necessarily mean that it's a part of the state. It makes even more sense in my mind when I think of a client with a 60 Hz monitor and a client with a 200 Hz one. With the current animation frame being considered a part of the app's state, such clients could never have the same app, except for the 0th frame.

Gerome15:10:02

Interesting point. Still feels weird to trigger this change outside of reagent re-frame but I think it's exactly how this is meant to be used.

p-himik15:10:38

You can trigger it within Reagent though, just outside of re-frame. But see what works best in your case.

Gerome15:10:17

I thought about doing it within reagent but that isn't very nice with my use case.