Correct way to pass functions to handlers in 'dumb' components in React

Viewed 2867

Looking at this simple example where the prop toggleData would be a redux thunk action mapped to the container props.

Is this the recommended way to pass a function like this to a child 'dumb' component? I read an article online saying that using arrow functions inside handlers is expensive and not very efficient from a performance perspective.

class Container extends React.Component {
    render(){
        return (
            <Home toggleData={this.props.toggleData}/>
        )
    }
}

const Home = (props) => {
    return (
        <button onClick={()=>{props.toggleData()}}></button>
    )
}
1 Answers
Related