Estoy trabajando en un ciclo for que comienza con 1 columna en window.innerHeight de 530 px y aumenta con +1 si window.innerHeight se incrementa con 40.
Esto es lo que tengo en este momento, pero dice demasiados renderizados cada vez. ¿Alguien sabe por qué?
let gridcolumns = 1; useEffect(() => { for (let i = 530; i < window.innerHeight; i += 40) { gridcolumns += 1; } }); setColumnsAmount(gridcolumns);Debe agregar la lista de dependencias a su useEffect:
let gridcolumns = 1; useEffect(() => { for (let i = 530; i < window.innerHeight; i += 40) { gridcolumns += 1; } setColumnsAmount(gridcolumns); },[]);Su llamada useEffect no tiene una matriz de dependencia, por lo que su devolución de llamada se llama después de cada procesamiento. Luego, la devolución de llamada hace setColumnsAmount , que desencadena una nueva representación, que desencadena la devolución de llamada useEffect , que desencadena una nueva representación, etc.
Debe especificar una matriz de dependencia que diga qué es lo que debe cambiar para que desee ejecutar la devolución de llamada, o no use useEffect para esto en absoluto y haga el cambio de cantidad de columnsAmount en una devolución de llamada de evento (tal vez un evento de cambio de resize ) .
Nota al margen: probablemente pueda reemplazar el ciclo for con const x = Math.floor(window.innerHeight / 40); y luego hacer lo que quieras con x (por ejemplo, podrías agregarlo a gridColumns si eso es realmente lo correcto).