How to prevent React re-rendering using memo()?

52 Views Asked by At

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>
      );
    });
}
0

There are 0 best solutions below