Please look at the below code snippet, specially the commented part. This is copied from React-grid-layout gitHub widthProvider() page.
Ref: https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/components/WidthProvider.jsx [Line:66-67]

My Question: How to implement this resize event in React.js?

I am creating a dashboard where I can open a popup menu to add/remove the grid-items. After adding the enough grids to overflow the height, scrollbarY appears which overlaps the grid-item.

I want to recalculate the width on addition of scrollbar.

Documentation also suggests to use other WidthProvider HOC if you need more sophisticated logic.
Ref: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width

Thank you!

componentDidMount() {
      this.mounted = true;
      window.addEventListener("resize", this.onWindowResize);
      // Call to properly set the breakpoint and resize the elements.
      // Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
      // appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
      this.onWindowResize();
    }