what is the difference between using arrow function and not using arrow?(feat.React) [Edited]

Question

I have few examples.

first

const { window } = props;
const container =
    window !== undefined ? () => window().document.body : undefined;

It means if window is not undefined, it will show something in the body.
but what's the difference between using below??

const container =
    window !== undefined ? window().document.body : undefined;

and secondly
In jsx, I set onChange event and these two work differently.

const handleClick = () => { console.log('hi'); }
<input onChange={handleClick} type="text"/> 
//=> this operates well when input tag value is changed.

<input onChange={()=>handleClick} type="text"/>
//=>it doesn't work even when input tag value is changed.

• Edited
  Now I clearly understood the differences.

1. <input onChange={handleClick} type="text"/>
2. <input onChange={() => handleClick()} type="text"/> 
//1,2 work same. But when you have to pass 'event' or some parameters to
//function, you can use second way.

//or If you wanna put more than one functions on `onChage` event,
2-1. <input onChange={() => {handleClick(); handleCheck();}} type="text"/> 

3. <input onChange={handleClick()} type="text"/> 
//This will call function immediately (when component mounted)
// even 'input' tag is not changed.

4. <input onChange={()=> handleClick} type="text"/> 
//This just returns `handleClick` function so `handleClick` will not be operated.

Answer 1

Firstly, in:

const container =
    window !== undefined ? () => window().document.body : undefined;

the container is a function, that you can call to get the value returned by window().document.body. But in:

const container =
    window !== undefined ? window().document.body : undefined;

the container is the value returned by window().document.body.

It's hard to tell which is correct without context, but the main difference is at which point you read the value of window().document.body:

const wVal = {
  document: { body: "A" }
};
const window2 = () => wVal;

const now = window2 !== undefined ? window2().document.body : undefined;
const deffered = window2 !== undefined ? () => window2().document.body : undefined;

window2().document.body = "B";

console.log(now);        //=> "A"
console.log(deffered()); //=> "B"

Secondly, in:

<input onChange={handleClick} type="text"/> 

onChange event will trigger handleClick function to be called (with event data as an argument). But in:

<input onChange={()=>handleClick} type="text"/>

onChange event will trigger ()=>handleClick arrow function to be called, which returns reference to handleClick function (without calling it).