I have this map with different components each.
When i put export memo(function componentName()...) on every component that I have inside of this map, it's still re-render when editMode is changing state..
I also tried to useMemo/useCallback to my data state but it just keep re-renders. What exactly am i missing here?
State
const {data, setData} = useState(false)
const [editMode, setEditMode] = useState(false)
Map Code
{
data.dataWidget.length > 0 &&
data.dataWidget.map((item) => {
return (
<div
key={item.id}
data-grid={{
x: item.x,
y: item.y,
w: item.w,
h: item.h,
isResizable: editMode,
isDraggable: editMode,
resizeHandles: ["se", "sw", "ne", "nw", "e", "w", "n", "s"],
}}
>
{item.analytic_model.type != "indicator" ? (
<div
className={`${"border border-neutral-40 h-full flex flex-col"}`}
>
<div className="p-16 flex justify-between border-b border-neutral-40">
<Header
setData={setData}
analytic_widget={item}
isModalVisible={() => {
setDataConfigModal((prev) => {
return {
...prev,
isVisible: !prev.isVisible,
data: item,
};
});
}}
/>
</div>
{item.analytic_model.type == "canvajs_graph" && (
<div className={`p-16 h-full canvas_js_${item.id}`}>
<CanvaJsGraph
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
)}
{item.analytic_model.type == "chartjs_graph" && (
<div className="p-16 h-full">
<ChartJsGraph
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
)}
{item.analytic_model.type == "chartjs_bar" && (
<>
<div className="p-16 h-full">
<ChartJsBar
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
</>
)}
{item.analytic_model.type == "leaflet_position" && (
<div className="p-16 h-full">
<LeafletPosition
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
)}
{item.analytic_model.type == "leaflet_polyline" && (
<div className="p-16 h-full">
<LeafletPolyline
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
)}
{item.analytic_model.type == "datatable" && (
<div className="p-16 h-full overflow-y-auto">
<DatatableDashboard
analytic_widget={item}
dataDashboard={data.dataDashboard}
/>
</div>
)}
</div>
) : (
<Indicator
analytic_widget={item}
dataDashboard={data.dataDashboard}
dashboardHeader={
<Header
setData={setData}
analytic_widget={item}
isModalVisible={() => {
const element = document.getElementById(
`dashboard-${item.id}`,
);
element.style.display = "block";
}}
/>
}
/>
)}
</div>
);
});
}