[Solved]-why is afterSetExtremes function being called twice highcharts using react-Highcharts

That's because there are different orders of action.

With React:

1. Chart is created without data
2. Data is received and the chart is updated

Without React:

1. Data is received
2. Chart is created

As a solution, you can call loadInitialData in useEffect hook and render HighchartsReact component after the data has been received.

const ChartComponent = () => {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadInitialData();
  }, []);

  function loadInitialData() {
    fetch(dataURL)
      .then((res) => res.ok && res.json())
      .then((data) => {
        ...
        setOptions({
          ...chartOptions,
          series: [
            {
              data
            }
          ],
          ...
        });
      });
  }

  function afterSetExtremes(e) {
    ...
  }

  return (
    options && (
      <HighchartsReact
        constructorType="stockChart"
        highcharts={Highcharts}
        options={options}
      />
    )
  );
};

Live demo: https://codesandbox.io/s/highcharts-react-3tcdw7?file=/demo.jsx