En el siguiente código, creo un enlace que usa useState dentro de él, el enlace funciona perfectamente. Luego creo un segundo gancho personalizado que dentro usa un useRef para imprimir un elemento html en la consola, este último no funciona porque no sé cómo referirme al elemento del gancho que estoy creando. Aquí el código:
import "./styles.css"; import {useEffect, useRef, useState} from "react" function useChangeText(){ const [n,setN]= useState(0) const sum= ()=> setN(n + 1) return {number:n,sum} } function useGetHTML(n){ const element= useRef(null) useEffect(()=>{ console.log(element.current) },[n]) } export default function App() { const hookSum= useChangeText() const element= useGetHTML(hookSum.number) return ( <div ref={element} className="App"> <h1>{hookSum.number}</h1> <button onClick={hookSum.sum}>click +1</button> </div> ); }Se trata de exportar la referencia creada a partir de su gancho useGetHTML para que pueda ser utilizada por su componente de consumo, tal como lo hizo en el gancho useChangeText :
function useGetHTML(n){ const element = useRef(null); useEffect(()=>{ console.log(element.current) },[n]); return element; } Luego, en su componente, el element ya no estará indefinido, sino que será la referencia exportada de su gancho personalizado:
const element = useGetHTML(hookSum.number);No necesita useRef ni useEffect para eso.
Puede pasar una devolución de llamada de setter a ref= se llamará con su elemento una vez que su componente esté montado:
import "./styles.css"; import {useState} from "react" function useChangeText(){ const [n,setN]= useState(0) const sum= ()=> setN(n + 1) return {number:n,sum} } function useGetHTML(n){ const [element, setElementRef] = useState(null) if (element) { // just use if here console.log({ element, n }) } return setElementRef } export default function App() { const hookSum= useChangeText() const setElementRef= useGetHTML(hookSum.number) return ( <div ref={setElementRef} className="App"> <h1>{hookSum.number}</h1> <button onClick={hookSum.sum}>click +1</button> </div> ); }