Could you please help to understand the list reordering example code?

[ZenBerry]

I'm trying to understand every line of this beautiful example: https://codesandbox.io/embed/r5qmj8m6lq
Could you please suggest from where the "index" argument on line 12 is taken?

const fn = (order, down, originalIndex, curIndex, y) => index =>

I've tried console.logging index and it returns this:

0
1
2
3

The index clearly depends on the number of the springs generated, but how exactly does the fn function get the index value?
Thanks a million!

Upd:

By console.logging I've found out that fn(order.current) on line 19 is calling the return function instead of the fn itself, and passes two arguments there. But could you please help to find out where might this behaviour be defined?
I'm just trying to avoid the confusion in the future)

Peace & love!

[tomdohnal]

The fn function is a higher-order function. i. e. a function which returns a function.
On line 19, there it's called like this:

const [springs, setSprings] = useSprings(items.length, fn(order.current))

Calling fn(order.current) results in passing a index => { ... } function (with a closure over the order.current variable) to the useSprings function.
And as the useSprings function can take a callback function (with an index as its argument) as per the docs, it passes the index variable to the callback function.

An analogical situation is on line 24. Calling fn(newOrder, down, originalIndex, curIndex, y) creates a callback which is passed to the setSprings function which then calls the callback with an index for each spring

[ZenBerry]

Thank you so much! ^_^