14

I'm having questions about when to call a function inside a react component. Sometimes my code breaks when I don't add the brackets to a function call, but not always. Is there some sort of rule i'm missing here?

Doesn't work

// Callback of parent component
<Link onClick={this.props.OnNavigate}>
    A link
</Link>

Does work

// Callback of parent component
<Link onClick={this.props.OnNavigate()}>
    A link
</Link>

// Callback for function of component
<li onClick={this.toggleDepartments}>other example</li>
NealVDV
  • 2,302
  • 3
  • 26
  • 51
  • I think the first one doesn't work because this react class doesn't have any idea wheather this.props.onNavigate is function or a property. Therefore we need to call it with parentheses. – Prakash Sharma Feb 11 '17 at 16:43
  • this.toggleDepartment belongs to this class so react class has idea that it is function so we dont need any parentheses. I am not sure though. Need to search a bit. – Prakash Sharma Feb 11 '17 at 16:45
  • @Prakashsharma: no, that's not the case. – Felix Kling Feb 11 '17 at 16:45

2 Answers2

30

foo() is calling the function referenced by foo. foo itself is just a reference to a function, it doesn't call the function.

So, you need to use parenthesis if you want to call the function right here and now.
You have to omit the parentheses if you want to pass the function to other code so it can call the function. That would be the case with event handlers. this.props.OnNavigation should be called when the click event happens (which is some time in the future), not when the component is rendered.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • Isn't this.props.OnNavigation a reference to the function? And by writing onClick={this.props.OnNavigate()}, aren't we calling it during render instead of onClick. – Prakash Sharma Feb 11 '17 at 17:17
  • That's correct. – Felix Kling Feb 11 '17 at 17:19
  • But then according to question how does onClick={this.props.OnNavigate()}> work? – Prakash Sharma Feb 11 '17 at 17:21
  • 3
    I don't believe that that was a correct assessment. It might "appear" to work. Of course there is also the possibility that `onNavigation` returns a function that is the actual event handler, but that's probably less likely. Nonetheless, whatever the case is, my statement is correct. – Felix Kling Feb 11 '17 at 17:26
  • Yes i think your statement is right and make sense. But this thing gave me confusion. – Prakash Sharma Feb 11 '17 at 17:31
-3

It's good practice to call the function with parens, because when you create a separate js file and link them together with the script tag, you know for certain that it's calling that specific function.

Allen
  • 29
  • 1
  • 2
  • 10
  • Thanks! Do you have any documents / posts that reference this so I can learn more about this? – NealVDV Feb 11 '17 at 16:28
  • I have two external 'books' from Interactive Python (which my profs made!) that you can test this out for yourself and read up on it. This one is for beginners, but it still has a lot of useful js stuff in it: http://interactivepython.org/runestone/static/webfundamentals/Javascript/intro.html The other is more complex js, and it covers ECMAscript 6: http://interactivepython.org/runestone/static/JS4Python/index.html – Allen Feb 11 '17 at 16:36