React dangerouslySetInnerHTML for raw htm having YT iframe making AJAX on every state change

Question

Im using the dangerouslySetInnerHtml to render the raw html

class DangerousPDescComp extends Component {
constructor(props){
    super();
    console.log(props);
}

componentWillReceiveProps(props){
    console.log('---->',props);
}

shouldComponentUpdate(props,state){
    if(nextProps.pdpSelectedData.heroProduct.pogID === this.props.pdpSelectedData.heroProduct.pogID){
        return false;
    }
    return true;
}

render(props, state){
    return(
        <div dangerouslySetInnerHTML={{__html: this.props.pDesc}} class={"descriptions marT15 " + (this.props.showProductDesc ? " ":"hidden") } ></div>
    )
}

}

export default DangerousPDescComp;

this works fine, but when render is triggered on parent component state change, it is making azax call and fetching all YT component resources thus exploiting the bandwidth. i alos used shouldcomponentupdate and return false when the cmponent is already rendered, but next tym on state change as render will not get called so component doesnt appear. Pleas help
see image for detail