Best Practices for Writing Event Handlers

The following screen shows an alert before the user touches anything, and then its button does nothing:

import { Alert, Button, View } from 'react-native';

export default function App() {
  const showAlert = () => {
    Alert.alert('Added', 'Milk is on your list.');
  };

  return (
    <View>
      <Button title="Add Milk" onPress={showAlert()} />
    </View>
  );
}

Two characters cause both problems. Avoiding this mistake is the first of several habits below that keep event code correct and easy to change, and each one continues with the grocery screen.