Call a method in child component only after parent completes re-render

Question

I have a graph with lower graphic quality displayed by a parent component<HeatMap />. HeatMap has a child component, <MyButton {...data}>. MyButton is basically a button, which is dowloads the graph image. My requirement is: after button is clicked, the parent(HeatMap) should get re-rendered into a high quality svg image. And only after that, the download should happen.

What I have been able to achieve: On clicking the button for the first time, quality of the image changes into an svg, but png image gets downloaded. I think the downloading starts before the the parent is completely rendered.

Code:

class HeatMap extends Component {
  constructor (props) {
    super(props);
    this.state = {
      getSVG: false,
      loadedData: [],
    }
  }
  render () {
   const { getSVG, loadedData } = this.state;
   return (
    <Fragment>
      {getSVG
        ? <HeatmapSeries colorType="literal" data={loadedData} /> // svg graph
        : <HeatmapSeriesCanvas colorType="literal" data={loadedData} />} // png(low-qlty)
      <MyButton 
        {...this.props}
        svgFunction={(required) => this.setState({ getSVG: true})}
        getSVG={getSVG} 
       />
    </Fragment>
  )
  }
}

class MyButton extends Component {
  render() {
    return (
      <Button size="small" icon="download" onClick={this._downloadSVG} >SVG</Button>
    )
  }
  /**
   * Generate the image and the download action
   * @return {void}
  **/
  async _downloadSVG() {
    const { svgFunction } = this.props;
    if (typeof svgFunction === 'function') {
      svgFunction(); // re-render the graph as a vector (try to re-render parent first)
    }
    methodToDownloadGraph({...this.props}); // graph svg is passed as argument
  }
}

Problem is : methodToDownloadGraph completes before, re-render of parent completes. Here is a picture of what I want to achieve:

score 1 · Answer 1 · answered Feb 02 '22 at 16:19

1

React's setState is an asynchronous function, which means it will not update state immediately after calling it. If you want to do some operation after state update then you need to pass callback as second argument to setState function.

To resolve this issue you will need to call methodToDownloadGraph function in HeatMap component instead of Button component.

You can do something like this:

svgFunction={(required) => this.setState({ getSVG: true}, () => methodToDownloadGraph())}

answered Feb 02 '22 at 16:19

Shariq

186
2
5

This works as well, but this will require me to call `methodToDownload` from the parent (`HeartMap`). This is not ideal for my case. But @Chandan Gupta serves the purpose here for me. – Amiay Narayan Feb 03 '22 at 02:07

score 1 · Accepted Answer · answered Feb 02 '22 at 16:49

Try This One

async _downloadSVG() {
        const { svgFunction } = this.props;
        if (typeof svgFunction === 'function') {
          await svgFunction(); // Add this line as it is
        }
        methodToDownloadGraph({...this.props}); // graph svg is passed as argument
      }

Call a method in child component only after parent completes re-render

2 Answers2