Passing function as props inside JSX

[Worble]

Hi, I just wanted to check something about my own understanding, I've attached a screenshot of a lint error where I'm passing a function from props to a child element. Since the signatures are the same, I'm used to just passing it straight down without an anonymous function, however the linter claims that props won't be tracked, even though it is inside jsx. The lint doesn't appear if I do () => props.func() Is this a linter bug or will it not actually be tracked?

Attached Screenshot:

[joshwilsonvu]

Good question! This one is subtle, but the lint rule is correct here. From the docs:

Events are never rebound and the bindings are not reactive, as it is expensive to attach and detach listeners. Since event handlers are called like any other function each time an event fires, there is no need for reactivity; simply shortcut your handler if desired.

So if the prop changes, the old value will still be set as the event handler, leading to potential bugs. Wrapping with a function ensures that the most up to date prop value is used.

[Worble]

Thank you for the explanation! And thank you for the eslint plugin, I would never have caught that from the docs without it.