[Solved]-I have an api call that I need to invoke before the second render after it receive new props-Reactjs

Try adding an if condition inside the componentDidUpdate to check whether isActive changed or not

componentDidUpdate(prevProps){
    if(prevProps.isActive !== this.props.isActive){
        this.getRecipe(this.props.isActive);
    }        
}

this would only call the getRecipe function once the props value of isActive change