ResponsiveBar in production build - Y axis tick values not updating on setstate

Describe/explain the bug I’m using ResponsiveBar to visualize simple grade percentage data. In development everything works as expected however, in production the tick values don’t seem to update on setstate.

Code

          <ResponsiveBar
            data={gradePrecentage}
            keys={["A", "B", "C", "D", "F", "O"]}
            indexBy="id"
            margin={{ top: 0, right: 60, bottom: 50, left: 50 }}
            padding={0.1}
            valueScale={{ type: "linear" }}
            indexScale={{ type: "band", round: true }}
            label={(d) => `${d.value}%`}
            colors={[
              "#41ab5d",
              "#7fc97f",
              "#f16913",
              "#ef3b2c",
              "#e41a1c",
              "#e41a1c",
            ]}
            itemHeight={"120px"}
            axisTop={null}
            axisRight={null}
            axisBottom={{
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: "Grade",
              legendPosition: "middle",
              legendOffset: 32,
            }}
            axisLeft={{
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: "% of Students",
              legendPosition: "middle",
              legendOffset: -40,
            }}
    />

data = [{id: key, data: value}]

Expected behavior Y axis Tick values should update as data changes on setstate in production build.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser chrome 88.0, safari 14.0.2

[mehulmshah]

I should have updated – I was able to fix it using this solution

Essentially due to an issue with react-spring, you have to set sideEffects: false in your config – like @monzilnepali says above.

[wyze]

We’ve update to the latest react-spring and this workaround won’t be needed.