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
Subscribe To Our Newsletter
Enter your email address to subscribe
