Aquí hay un ejemplo de mi código. Quiero obtener un elemento específico usando la identificación de la URL (NextJS). Primero quiero validar la identificación de que useElement no se ejecuta sin un significado.

 const {id} = router.query // Make sure id is not undefined const element = useElement(id)

Enfoque 1

El siguiente fragmento de código tendría sentido, pero no funciona porque React siempre necesita la misma cantidad de enlaces.

Error: React ha detectado un cambio en el orden de los Hooks llamados por Foo. Esto dará lugar a errores y errores si no se soluciona. Para obtener más información, lea las Reglas de Hooks: https://reactjs.org/link/rules-of-hooks

 const {id} = router.query if (!id) { return null } const element = useElement(id)

Enfoque 2

También pensé en validar directamente dentro de mi gancho personalizado. Sin embargo, React no permite eso.

Error no detectado: debe haber una cola. Esto es probablemente un error en React. Por favor, presente un problema.

 export function useElement(id) { const [element, setElement] = useState() if(!id) { return undefined } useEffect(() => { ... }) return element }

¿Cuál es el mejor enfoque para resolver este problema?