I've heard that passing an arrow function as a prop is not ideal because it creates a new function every time which will lead to performance issues. However, I'm not entirely sure how to completely move away from them, as can be seen by the example below:

```
class Home extends Component {

    onCardPress = (message) =>{
        alert(message)
    }

    render(){
        return(
            <View>
                <Card 
                    onCardPress={this.onCardPress}
                    message="Hello world!"
                />
            </View>
        )
    }
}

class Card extends Component {
    render(){
        const { onCardPress , message } = this.props;
        return(
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={()=>{onCardPress(message)}}
            />
        )
    }
}

```

I have tried changing `onPress` in `Card` to be `onPress={onCardPress(message)}`, but I know this doesn't work because I am invoking the function rather than passing a function object to the `onPress` of `TouchableOpacity`. What is the 'proper' way or best practice to remove the arrow function in `TouchableOpacity` while still being able to pass the `message` parameter from the parent component `Home`?