Unexpectedly different behavior from javascript function inlining
I see different behavior after javascript function inlining and I don't understand why.
Consider:
const someFunc = someParam1 => someParam2 => {
// doSomething
}
const someFuncIndirect = someParam2 => {
return someFunc(null)(someParam2)
}
// I expected parameter1 and parameter2 to be interchangeable but they are not
const funcRef1 = someFunc(null)
const funcRef2 = someFuncIndirect
An example of the different behavior can be seen here: https://codesandbox.io/s/0V2VyG7BV
The first input field uses the inline version and has the behavior that a non-accumulating input field after the first character is entered. The second input field uses an indirect method and does not suffer from this problem. I also noticed that if I type the text in the second input box first, the focus issue on the first input box goes away.
The whole reduction form appears to be associated with a function reference - this is a call to React.createElement with it. The parent caller is different from the two, but I can't think of how it could lead to this behavior. What am I missing?
Update: Fixed indirect func example to use someParam2.
source to share
In the code you pasted above, there parameter1
will be a function that takes param2
and will doSomething
. parameter2
, on the other hand, would be a function that, when called, would return a return value someFunc
that would be the same as parameter1
. So if you want both to parameters
behave the same, replace someFuncIndirect
with someFuncIndirect()
in the lineconst parameter2 = someFuncIndirect
source to share