Hi Dima — That approach still creates a new function on each render.
Cory House

This solution has the same performance problem as the original you’ve just moved your arrow function. Every time render is called you will call this.deleteUser(user.id) which will return a new arrow function. This just added another function call and moved the closure. This still creates a new prop on each render resulting in children re-rendering.

To avoid pulling out a component you would need a way to get the same function with each call. This could be done if this.deleteUser was memoized, but at that point components seem simpler.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.