Tengo una pantalla A , un componente B y un gancho C
La pantalla A representa el componente B y ejecuta su lógica a través del gancho C
Actualmente, en B estoy mostrando una lista de elementos presionables:
function FilmCategoriesFilter({ // This is the component B defaultSelectedFilter = FILM_CATEGORIES[0], }) { const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES); return ( <PressableList data={FILM_CATEGORIES} selectedItem={selectedFilter} onPressItem={setSelectedFilter} /> ); } En mi gancho C , necesito recibir una category de parámetro, que debe ser igual al valor de estado de B
Pensé en mover el estado del componente al padre y actualizarlo mediante una devolución de llamada. Pero, si lo hago, creo que el componente B ya no será reutilizable.
Quiero decir, si manejo su estado, los datos que lo hacen funcionar, fuera de él, el componente pasará de ser un componente autofuncional a solo un componente de interfaz de usuario que solo funciona en la pantalla A
¿Es esto un antipatrón? ¿Algun consejo?
Tener la vista principal para un estado particular de alguna manera separada de la funcionalidad que manipula y cambia ese estado está bien y es normal, especialmente cuando el estado también debe compartirse entre otros componentes.
Un enfoque que puede usar para esta situación para dejar en claro que un estado está directamente vinculado a un componente, pero que también se puede usar en otros lugares , sería declarar tanto el gancho como el componente en el mismo archivo, exportar ambos y nada más.
export const useSelectedFilter = (defaultSelectedFilter = FILM_CATEGORIES[0]) => { const [selectedFilter, setSelectedFilter] = useState(FILM_CATEGORIES); // put methods that manipulate the state here // then return an object with those methods along with the state and setter const doSomethingWithSelectedFilter = () => { // ... }; return { selectedFilter, setSelectedFilter, doSomethingWithSelectedFilter }; }; export function FilmCategoriesFilter({ selectedFilter, setSelectedFilter, }) { return ( <PressableList data={FILM_CATEGORIES} selectedItem={selectedFilter} onPressItem={setSelectedFilter} /> ); } // end of file Esto le permite usar useSelectedFilter en un componente principal, mientras deja absolutamente claro que useSelectedFilter implementa la lógica principalmente para que la use FilmCategoriesFilter . Todavía es modular y reutilizable debido al gancho personalizado.