Document how to pass args to event handlers

[bvaughn]

This issue was originally reported by @StokeMasterJack via facebook/react/issues/9685

A similar issue was reported by @Frazer via facebook/react/issues/8065

Text of original issue #9685

Inside a loop it is common to want to pass a param to an event handler:

<button onClick={(event) => this.deleteRow(23)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this,23)}>Delete Row</button>

That would be a good thing to add to this doc page:

https://facebook.github.io/react/docs/handling-events.html

Also, how to pass args without triggering a re-render in the child component (i.e. creating a new function every time).

[swyxio]

will work on this

[bvaughn]

This issue is all yours! 😄

I've added an "in-progress" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

[alexkrolick]

This topic was also been suggested for the FAQ in #29, so I included some comments in PR #43 (diff).

It might be a good idea to merge the docs on this subject, or link from one to the other.

[Frazer]

I think @hedgerh suggestion should also be included.

<button name='23' onClick={this.deleteRow}>Delete Row</button>

deleteRow (e) {
// do some action to (e.target.name)
}

[alexkrolick]

@Frazer added to the FAQ version of this topic: b2ef5ff

[alexkrolick]

Closed by #81 I think

[gfortaine]

@StokeMasterJack @bvaughn There is also a third way through currying (see How to pass variables to a function reference?, thx @esthercuan) 👍

deleteRow = id => event => {
    event.preventDefault();
    console.log('row ${id} deleted');
 }

<button onClick={this.deleteRow(23)}>Delete Row</button>

[Frazer]

Thanks for the interesting example. This creates a copy of the function every time it is rendered, so I'm guessing wouldn't be good when performance is an issue.

…

On Tue, Oct 8, 2019, 11:55 PM Guillaume FORTAINE ***@***.***> wrote: @StokeMasterJack <https://github.com/StokeMasterJack> @bvaughn <https://github.com/bvaughn> There is also a third way through currying (see How to pass variables to a function reference? <https://stackoverflow.com/a/50631170>, thx @esthercuan <https://github.com/esthercuan>) 👍 deleteRow = id => event => { console.log('row ${id} deleted'); } <button onClick={this.deleteRow(23)}>Delete Row</button> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#75>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC3NQFCHELK3CDPCUNGQOTQNV55LANCNFSM4D6HFTJQ> .

[bvaughn]

@Frazer The overhead of creating a function during render is rarely a performance problem. We do it all the time to add event handlers, map arrays, etc. The new hooks API also makes heavy use of this pattern for hooks like useEffect and useMemo (which require creating a function every render, even if it's not called every render).

When it can be a problem is when it breaks memoization and causes a performance sensitive subtree of your application to re-render when it would otherwise not have re-rendered. This is something the DevTools Profiler UI can help you identify and fix though.