All topics

Discrepancy Between Variable Value Logged to Console and Current Value in Toddle

KillerK009

4 months ago

I have a program variable which has a days element which is an array of values that I display using a Spark Drag and Drop list UI element. I want to allow dragging elements to reorder the underlying array.

Using the On end event provided by the Spark list I set my variable value by moving the dragged element in the days array based on the oldIndex and newIndex values provided by the event data.

I implemented the move function in a pretty simple custom code formula which seems to be outputting the correct new array when I log to console.

But even though I'm seeing the correct program value output in the console during the On end event handler, when I look at the current program value in Toddle it's not correct and not matching what is output to console.

Am I doing something wrong here?

I've created a very simple test app to demonstrate my issue:
https://toddle.dev/projects/drag_n_drop_test/branches/start/components/HomePage

Just try dragging the first day Push to the end of the list. The program should then have days in order: [Pull, Legs, Push] which is what I see in the console, but the current value in Toddle has the original order of [Push, Pull, Legs] still.

Also, it seems like my event handler steps are not running in order since I have it set to log to console before and after setting the program to compare but they both seem to be outputting the same value with the array already rearranged... 😕.

Do event handlers not run sequentially?
Max

4 months ago

Hi! splice mutates the original array. If you create a copy, this should work:

function MoveDay({ program, oldIndex, newIndex }) {

const days = [...program.days];
const [movedItem] = days.splice(oldIndex, 1);
days.splice(newIndex, 0, movedItem);

return {
...program,
days
};
}
🙏1
Max

4 months ago

I also saw that you did not set the repeat key in the repeat items. Could be the testing environment, but wanted to mention it anyway. The repeat key should be an ID ideally. Improves re-rendering performance.
@Max
Hi! splice mutates the original array. If you create a copy, this should work:

function MoveDay({ program, oldIndex, newIndex }) {

const days = [...program.days];
const [movedItem] = days.splice(oldIndex, 1);
days.splice(newIndex, 0, movedItem);

return {
...program,
days
};
}
KillerK009

4 months ago

Yup seems to work!!

But I'm confused as to why. Do I need to always make a copy of Toddle variables that I provide as input parameters to custom code even if I do want to change the values of the Toddle variable? Like should I only ever be setting a Toddle variable value in a standard Toddle formula and not directly modifying it via the custom code?

Because in this situation I did actually want to mutate the original passed in program.days[] and I was seeing the correct output printing to the console but then looking at the current value of the program.days[] in Toddle it wasn't matching the console output.

It just seemed weird to me to make a copy, make changes on the copy, and then immediately set the variable to this new copy instead of just directly updating the original variable.

Not a big deal or anything, just wondering if this is how I always have to do it.
@Max
I also saw that you did not set the repeat key in the repeat items. Could be the testing environment, but wanted to mention it anyway. The repeat key should be an ID ideally. Improves re-rendering performance.
KillerK009

4 months ago

Thanks for mentioning that! Totally didn't know I should be setting this!! I saw it set in some of the Guide videos but didn't know you're supposed to always do that for best performance. Is there more detailed documentation somewhere that talks about this? I feel like the videos just mentioned setting it but didn't go into why but maybe it did and I'm just forgetting...

Still very new to Toddle and I was watching a lot of tutorials and videos and such so very possible I missed things 😆 .
@KillerK009
Yup seems to work!!

But I'm confused as to why. Do I need to always make a copy of Toddle variables that I provide as input parameters to custom code even if I do want to change the values of the Toddle variable? Like should I only ever be setting a Toddle variable value in a standard Toddle formula and not directly modifying it via the custom code?

Because in this situation I did actually want to mutate the original passed in program.days[] and I was seeing the correct output printing to the console but then looking at the current value of the program.days[] in Toddle it wasn't matching the console output.

It just seemed weird to me to make a copy, make changes on the copy, and then immediately set the variable to this new copy instead of just directly updating the original variable.

Not a big deal or anything, just wondering if this is how I always have to do it.
Max

4 months ago

Hey! Yes, you should not set variables in custom actions or formulas. I am pretty sure that this violates toddle's reactivity system
👍1
@KillerK009
Thanks for mentioning that! Totally didn't know I should be setting this!! I saw it set in some of the Guide videos but didn't know you're supposed to always do that for best performance. Is there more detailed documentation somewhere that talks about this? I feel like the videos just mentioned setting it but didn't go into why but maybe it did and I'm just forgetting...

Still very new to Toddle and I was watching a lot of tutorials and videos and such so very possible I missed things 😆 .
Max

4 months ago

I am not sure if there are docs on this topic. Basically, it works like in React or Vue: let's say you have a list of 50 items in a repeat and you don't have a repeat key set. Now when one item changes, all items will be re-rendered. toddle cannot detect, which item actually changed. If you set a unique ID as the repeat key and one item changes, only this one item will be re-rendered. So it will be way more performant in large lists
toddlelogoemoji1

Discrepancy Between Variable Value Logged to Console and Current Value in Toddle

KillerK009

Max

Max

KillerK009

KillerK009

Max

Max