tengo una entrada En cada cambio en la entrada, quiero llamar a una API.

Aquí hay una versión simplificada del código:

 // updated by input const [urlText, setUrlText] = useState(""); const fetcher = useFetcher(); useEffect(() => { if (urlText === "" || !fetcher) return; fetcher.load(`/api/preview?url=${urlText}`); }, [urlText]);

El problema es que, cuando coloco urlText dentro de la matriz de dependencias, hay un bucle de representación infinito, y React afirma que el problema es que podría estar actualizando el estado dentro de useEffect . Sin embargo, por lo que puedo decir, no estoy actualizando ningún estado dentro del gancho, por lo que no estoy seguro de por qué está ocurriendo un renderizado infinito.

¿Alguna idea?

La versión más completa del código es:

Nota: el error aún ocurre sin el rebote o useMemo , todo eso es más o menos irrelevante.

 export default function () { const { code, higlightedCode } = useLoaderData<API>(); const [urlText, setUrlText] = useState(""); const url = useMemo(() => getURL(prefixWithHttps(urlText)), [urlText]); const debouncedUrl = useDebounce(url, 250); const fetcher = useFetcher(); useEffect(() => { if (url === null || !fetcher) return; fetcher.load(`/api/preview?url=${encodeURIComponent(url.toString())}`); }, [debouncedUrl]); return ( <input type="text" placeholder="Paste URL" className={clsx( "w-full rounded-sm bg-gray-800 text-white text-center placeholder:text-white" //"placeholder:text-left text-left" )} value={urlText} onChange={(e) => setUrlText(e.target.value)} ></input> ); }