Según el hilo de abajo,
useCustomHook siendo llamado en cada render - hay algo mal con esto
Dice que es completamente normal seguir llamando a la función de gancho personalizado cada vez que React vuelve a renderizar.
Mis preguntas son si afecta el rendimiento al devolver una matriz de esta función Custom Hook (no al obtener API y recibir datos) que contiene muchos valores.
Si es así, ¿cómo evitarlo (cómo permitir que esta función Custom Hook se ejecute solo una vez)?
Aquí está mi código de gancho personalizado, devuelve una matriz que contiene alrededor de 5000 valores de cadena.
function FetchWords(url: string) { const [data, setData] = useState<string[]>([]); useEffect(() => { fetch(url) .then((words) => words.text()) .then((textedWords) => { setData(textedWords.replace(/\r\n/g, "\n").split("\n")); }); }, []); const expensiveData = useMemo(() => data, [data]); return expensiveData; } export default FetchWords;Mi js principal
const wordLists: any[] = useFetch( "https://raw.githubusercontent.com/charlesreid1/five-letter-words/master/sgb-words.txt" );use...useMemo en su enlace, simplemente devuelva el estado data .fetch solo una vez, por lo que no hay problema, ya que el efecto tiene una dependencia vacía, por lo que se ejecuta una vez después del primer procesamiento.data y devuelve la misma referencia cada vez que se llama a su enlace personalizado durante las re-renderizaciones de componentes. No hay operación de copia, por lo que no necesita preocuparse por eso.fetch 100 entradas, por ejemplo, su backend debe proporcionar esa API.Espero que esto resuelva tus dudas ya que no queda muy claro cuál es tu duda.