Tengo una variedad de widgets para la aplicación y cada componente de widget llama a la API para obtener sus datos. Hay varios tipos de widgets, gráficos, listas, tablas, etc. y la situación dicta que la página principal no puede llamar a los datos en sí misma, por lo que los componentes secundarios (widgets) tienen que hacerlo.

 widgetsArr.forEach((item)=> <Widget type={item.type} widgetConfig={item.config} />)\

Sin embargo, hay una configuración para la posición del widget en la página, basada en el índice de widgets en la matriz. La función simple hace el truco para esa parte:

 useEffect(() => { if (boardsContext.customisation) { setWidgetsArr(arrayMove(widgets, oldIndex, newIndex)); } }, [dep1,dep2]); // setWidgetsArray is setter for widgets array that lives on the same page as code above.

¿Entonces, cuál es el problema? Cuando configuro WidgetsArr nuevamente, cada uno está obteniendo datos nuevamente. Me gustaría evitar eso de alguna manera, pero dado que el estado y los accesorios del componente principal se cambian, se activa nuevamente.

Probé con useMemo, pero use memo no acepta promesas en su interior. Aquí hay una muestra de un código:

 const memoFetch = useMemo(()=>fetchChartsData(args).then((data) => isMounted && setData(data));, [deps]) useEffect(() => { let isMounted = true; //fetchChartsData(args).then((data) => isMounted && setData(data)); memoFetch() return () => { isMounted = false; }; }, [dependecy]); // this is individual Widget sample code (its not same for all the widgets but its similar

para este caso en particular estoy recibiendo:

 TypeError: Cannot read properties of undefined (reading 'fetchData')

Editar: estaba mirando esta pregunta y no me ayudó mucho además de recordarme que no debería usar useMemo y la llamada asíncrona entre sí.