Substituindo ternários por switch-case em React-Native

Recentemente lendo alguns posts sobre react-native encontrei uma forma de melhorar um componente. Originalmente, eu o havia implementado com ternários, mas como se tratava de múltiplos estados possíveis tornava o código difícil de entender e manter.

stateModal === "wait" ? <>...</> 
: 
stateModal === edit ? <>...</> 
: 
stateModal === "delete" ? <>...</> 
:
stateModal === "finish" ? <>...</> 
: null

Basicamente eu tenho um componente de modal que tem alguns estados: wait, edit, delete, finish

A forma que encontrei para melhorar.

Definindo switch-case

const switchModalState = () => {
        switch (stateModal) {
            case "wait":
                return (
                  <>...</>
                    )    

            case "edit":
                return (
                    <>...</>
                    )

            case "delete":
                return (
                    <>...</>
                    )

            case "finish":
                return (
                    <>...</>
                )

            default:
                return (
                    <>...</>
                    )
        }


    }

Chamando função para renderizar

return(
        <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
        >
            <View style={styles.modalContainer}>
                <View style={styles.modalContent}>
                    {switchModalState()}
                </View>
            </View>
        </Modal>

        )
}

Concluindo

Dessa forma fica mais simples para que outros desenvolvedores entendam o código e também facilita a manutenção, tornando mais fácil adicionar estados novos, ou editar um estado específico. Investir tempo em uma estrutura bem definida para lidar com os estados do modal não apenas facilita o trabalho para mim como desenvolvedor, mas também para qualquer pessoa que precise entender ou modificar o código no futuro.

Se quiser visualizar o código atualmente: https://github.com/olucascruz/control_equip/blob/main/src/components/ModalEditDelete.jsx

Refs:
https://dev.to/girordo/algumas-das-melhores-praticas-que-utilizo-diariamente-41c4
https://stackoverflow.com/questions/46592833/how-to-use-switch-statement-inside-a-react-component