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.