entonces, tengo esta función aquí
const [shopItems,setShopItems] = useState("");_ useEffect(()=> { commerce.products.list().then((product) => { setShopItems(product) }); }, []) function categorize(category) { let categoryarray = [] if (shopItems!= "s") { shopItems.data.forEach((el)=> { for (let i =0; i < el.categories.length; i++) { if (el.categories[i].slug == category) categoryarray.push(el) } }) } return categoryarray; }useEffect Hook fue solo por contexto, lo que más me preocupa es la función de categorización. ¿Hay alguna forma de optimizar esto ya que he observado que mi sitio web se desplaza muy lentamente y creo que este podría ser uno de los culpables de las bajas velocidades de desplazamiento? ¡Gracias de antemano!
La única forma que veo para optimizar ese código es salir tan pronto como se encuentre una coincidencia. (Prefiero usar un ciclo while para este propósito).
shopItems.data.forEach(el => { let idx = 0; while (idx < el.categories.length) { if (el.categories[idx].slug == category) { categoryarray.push(el); break; } else { idx++; } } }); Si quisiera algo que se viera un poco mejor (sin mezclar forEach y for , por ejemplo), podría usar esto: (no hay mejoras de rendimiento hasta donde puedo ver, sin embargo)
shopItems.data.forEach(el => { if (el.categories.map(({ slug }) => slug).includes(category)) categoryarray.push(el); }); O incluso usar reduce :
let categoryarray = shopItems.data.reduce((a, c) => { if (c.categories.map(({ slug }) => slug).includes(category) return a.concat(c); else return a; }, []);La primera opción sigue siendo la de mayor rendimiento, ya que, de manera realista, se ejecutará en el bucle menos veces.
Puede usar useMemo https://reactjs.org/docs/hooks-reference.html#usememo
useMemo funciona al tener 2 parámetros. Una función y una matriz de dependencias, si alguna de las dependencias cambia, vuelve a ejecutar la función proporcionada y almacena el valor, a continuación, si las dependencias no han cambiado, solo usa el valor anterior.
const categories = useMemo(() => let categoryarray = [] if (shopItems!= "s") { shopItems.data.forEach((el)=> { for (let i =0; i < el.categories.length; i++) { if (el.categories[i].slug == category) categoryarray.push(el) } }) } return categoryarray; }, [shopItems.data, category])