Estoy limpiando un componente que escucha mi base de datos y, cuando responde, navega a una pantalla específica.
Este es mi componente original:
function MyComponent() { const { navigation } = useNavigation(); const start = (data) => { navigation.navigate("Somewhere", { data }); }; const listenData = (doc) => { const { something } = doc.data(); start(something); }; useEffect(() => { const listener = listenDB((data) => { setData(data); }; return () => listener(); }, []); return ...; }Y estoy pensando en mover toda la lógica a un gancho personalizado useMyComponentLogic();
function useMyComponentLogic() { const { navigation } = useNavigation(); const start = (data) => { navigation.navigate("Somewhere", { data }); }; const listenData = (doc) => { const { something } = doc.data(); start(something); }; useEffect(() => { const listener = listenDB((data) => { setData(data); }; return () => listener(); }, []); }y luego simplemente usarlo en mi componente:
function MyComponent() { useMyComponentLogic(); return <View>...</View>; }Con esto, mi gancho parece hacer dos cosas:
1. Handle navigation 2. Listening to db¿Es un antipatrón delegar todas las responsabilidades (como navegar cuando se escuchan datos) a un enlace personalizado?
Esto no lo veo como un antipatrón, al contrario, lo veo como un patrón de separación de preocupaciones.
Los componentes son vistas, que solo deben incluir vista, lógica de vista y controlador de eventos.
Cada enlace personalizado debe centrarse en una sola función y lógica. Para su caso, es mejor crear dos ganchos personalizados: useDB y useNavigation . Los ganchos son solo funciones js, las buenas funciones son compactas y solo hacen una cosa.
Del documento useYourImagination()
Trate de resistirse a agregar abstracción demasiado pronto. Ahora que los componentes de función pueden hacer más, es probable que el componente de función promedio en su código base sea más largo. Esto es normal, no sientas que tienes que dividirlo inmediatamente en Hooks. Pero también lo alentamos a que comience a detectar casos en los que un gancho personalizado podría ocultar una lógica compleja detrás de una interfaz simple o ayudar a desenredar un componente desordenado.
Y es fácil probar cada pequeño gancho personalizado usando react-hooks-testing-library en lugar de un componente que incluye una gran cosa.
Yo uso esta arquitectura, y funciona bien React & Redux Application Architecture