Unexpectedly different behaviour from inlining javascript function

Question

I am seeing different behaviour after inlining a javascript function 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 behaviour can be seen here: https://codesandbox.io/s/0V2VyG7BV

The first input box uses the inlined version and has a behaviour quirk of unfocusing the input box after the first character has been typed in. The second input box uses the indirect method and doesn't suffer from that issue. I've additionally noticed that if I first type text into the second input box, the focus issue on the first input box goes away.

All redux-form appears to do with the function reference is call React.createElement with it. The parent caller is different between the two but I can't think of how that would result in this behaviour. What am I missing?

Update: Fixed indirect func example to use someParam2.

Answer 1

In the code you pasted above, parameter1 will be a function that takes param2 and will doSomething . parameter2 on the other hand will be a function that, when called , will return the return value of someFunc , which will be the same as parameter1 . So if you want both parameters to behave the same, replace someFuncIndirect with someFuncIndirect() in line const parameter2 = someFuncIndirect