Herramientas

Generador de Nombre de Hook React

Nombrar custom hooks es clave para código mantenible. Este generador sugiere nombres claros con el prefijo 'use' siguiendo las mejores prácticas de React.

Instantáneo🔒En tu navegadorSin registro
En vivo
    Ver como texto

    Convenciones de naming en React hooks

    La regla fundamental: todo custom hook debe empezar con 'use'. Esto no es capricho estilístico: React depende de esta convención para aplicar las Rules of Hooks correctamente. El linter de React detecta hooks por el prefijo 'use' y valida que no se llamen condicionalmente o dentro de loops.

    Los nombres deben ser descriptivos pero concisos. useFetch es mejor que useData (vago) o useFetchDataFromApiEndpoint (verboso). Si el hook gestiona estado booleano, considerá useToggle, useBoolean o useSwitch. Para side effects, usá verbos: useDebounce, useThrottle, useInterval.

    Evitá nombres que colisionen con hooks nativos de React o librerías populares. No llames useState o useEffect a tus custom hooks. Si tu hook extiende funcionalidad de uno nativo, añadí un prefijo descriptivo: useLocalStorageState combina useState con localStorage.

    Patrones de composición de hooks

    Hooks de estado derivado: Cuando un hook computa valores a partir de otros, usá 'use' + sustantivo derivado. useFilteredList, useSearchResults, useSortedData. Estos hooks encapsulan lógica de transformación y memoización.

    Hooks de sincronización: Para side effects que sincronizan con sistemas externos, reflejá la acción. useSyncWithLocalStorage, useSubscribeToWebSocket, usePersistForm. El verbo indica que hay efecto secundario.

    Hooks de agregación: Cuando combinás múltiples hooks en uno de alto nivel, el nombre debe reflejar el dominio completo. useAuthenticatedUser puede internamente usar useAuth, useProfile y usePermissions. Documentá las dependencias internas.

    Hooks de configuración: Si tu hook acepta opciones complejas, considerá el patrón useX + useXConfig. Por ejemplo, useForm con useFormConfig para validadores customizados.

    Errores comunes al nombrar hooks

    Nombres demasiado genéricos: useData o useHandler no dicen nada. ¿Qué datos? ¿Qué maneja? Especificá: useUserProfile, useClickHandler. En un proyecto con 30 hooks, los nombres genéricos generan confusión.

    Abreviaturas crípticas: useFetchUsr, useQryRes. Las vocales son gratis, no las omitas. La única excepción aceptable son abreviaturas estándar del dominio: useAPI, useURL, useHTTP.

    Mezclar responsabilidades: useFetchAndValidateAndStore indica que el hook hace demasiado. Separalo en useFetch, useValidation y useStorage. Luego creá useUserWorkflow que los combine si necesitás una abstracción de alto nivel.

    No indicar async: Si tu hook devuelve promesas, considerá sufijos como useAsyncData, useFetchAsync. Aunque no es obligatorio, ayuda a los consumidores a anticipar manejo de loading/error states.

    Organización de hooks en proyectos grandes

    Creá una estructura de directorios por categoría: hooks/state/, hooks/api/, hooks/ui/, hooks/forms/. Cada hook vive en su propio archivo con tests al lado: useDebounce.ts + useDebounce.test.ts.

    Exportá hooks desde un index central para imports limpios: import { useAuth, useUser } from '@/hooks' en vez de paths relativos largos. Usá barrel exports pero evitá que un cambio en un hook obligue a recompilar todo el bundle.

    Nomenclatura de archivos: El archivo debe coincidir con el hook principal que exporta. Si useForm.ts exporta también useField y useValidation, documentá esto en el comentario JSDoc del archivo.

    Hooks de dominio: Agrupá hooks relacionados con features específicos. En features/cart/hooks/ tenés useCart, useCartItems, useCheckout. Esto escala mejor que meter todo en un directorio hooks/ global con 100 archivos.

    Preguntas frecuentes

    ¿Puedo crear hooks sin el prefijo 'use'?

    Técnicamente sí, pero React no los reconocerá como hooks y el linter marcará errores. El prefijo 'use' es obligatorio para que las Rules of Hooks se apliquen correctamente.

    ¿Cuándo crear un custom hook vs usar hooks nativos directamente?

    Creá custom hooks cuando la lógica se repite en 3+ componentes, cuando combinás múltiples hooks nativos con lógica compleja, o cuando querés encapsular side effects para testing.

    ¿Los hooks deben ser siempre funciones puras?

    No. Los hooks pueden tener side effects (useEffect) y estado interno. Lo importante es que sean predecibles: mismos inputs, mismos outputs para estado derivado. Documentá side effects en JSDoc.

    ¿Cómo nombrar hooks que devuelven múltiples valores?

    Si devuelve array tipo useState, nombralo por la acción principal: useToggle. Si devuelve objeto con múltiples propiedades, usá un nombre que englobe el dominio: useFormState (devuelve values, errors, touched, etc).

    ¿Te sirvió este generador?