Entonces, lo que estoy preguntando es si hay algún tipo de guía de estilo para escribir componentes funcionales reactivos con ganchos. A veces trabajo con componentes que incluyen diferentes tipos de ganchos:
Ejemplo (este no es mi ejemplo de código real, solo para entender):
import React, { useMemo, useEffect, useCallback } from "react"; import { useRouter } from "next/router"; import { useMediaQuery } from "react-responsive"; import { useCategory, useProducts} from "@hooks"; export const Category: React.FC<CategoryProps> = () => { const foo = useMemo(() => ( // some logic here.. ), []); const { query } = useRouter(); const { category, loading: categoryLoading } = useCategory(query.slug); const isDesktop = useMediaQuery({ query: "(min-width: 1280px)" }); const handleFoo = useCallback(() => { // some logic here... }, []); const { products, loading: productsLoading } = useProducts(category.id); useEffect(() => { // some logic here... }, []); return (<h1>Some big template here...</h1>); }Estoy luchando por encontrar algún tipo de información sobre cómo colocar (clasificar) ganchos dentro de los componentes. Unas cuantas preguntas:
Sé que la respuesta a esa pregunta es simple para ser consistente, pero quiero saber qué piensa la comunidad de reacción, cómo escribes tus componentes funcionales con ganchos.
Después de revisar la documentación de React, encontré un par de reglas con respecto a los ganchos: https://reactjs.org/docs/hooks-rules.html#:~:text=Instead%2C%20always%20use%20Hooks%20at, múltiples%20useState%20and%20useEffect%20calls .
También este artículo: https://blog.bitsrc.io/best-practices-with-react-hooks-69d7e4af69a7
El segundo artículo ofrece una buena lista de las mejores prácticas cuando se trata de React Hooks.
1.) Los componentes basados en clases tienen un orden más estructurado para todos los métodos de ciclo de vida con los que está trabajando con componentDidMount etc.
2.) Cuando se trata de un componente funcional, entonces el orden/estructura realmente no se aplica. Del artículo:
Se recomienda declarar primero las variables de estado con el gancho useState, luego escribir las suscripciones con el gancho useEffect seguido de cualquier función relevante para el trabajo del componente. Luego, finalmente, devuelve los elementos para que los represente el navegador...
En otras palabras, lo que tiene sentido para ti como desarrollador probablemente estará bien. Si este es un proyecto que está haciendo con otros desarrolladores. Desarrollar un estándar de tipo de codificación basado en su trabajo podría ser una buena idea.
Déjame saber si eso responde a tu pregunta :)