how to clear cache of browser using reactjs of infinite requests

Question

I have a loop in which I am calling a request to a backend(django) from react, when the user click start, the front end start calling the request and user is getting images in base 64 format in response,this request is running in loop and in every request gets 1 image, now the problem is after sometime the cache memory of google chrome becomes full in network tab as they are lot of images received per response,how to fix this issue, how can I clear the network tab responses.

 runInfinite=()=>{


        let payload={
            iterator:this.state.iterator
        };

        axios.post('http://127.0.0.1:8000/faceapp/process_image/', payload)
            .then(res => {
                this.setState({baseimage: res.data}, () => {
                    console.log(this.state.baseimage.length)
                });
                this.setState({iterator:this.state.iterator+1})
            });
    };

    stopResults=(e)=>{
        e.preventDefault()



        axios.get('http://127.0.0.1:8000/faceapp/stop_inference/')
        .then(res=>{
            console.log(res)
            this.setState({flag:false},()=>{
                this.setState({baseimage:null})
            })
        })

    }

    startResults=(e)=>{
        e.preventDefault()


        axios.get('http://127.0.0.1:8000/faceapp/start_inference/')
        .then(res=>{
            this.setState({flag:true})
            console.log(res)
        })
    }


 render() {

        if (this.state.flag){
            this.runInfinite()
        }
        return (
            <Grid fluid>
                <Row>
                    <Col xs={12} md={4} mdOffset={4}>
                            <h3>Results</h3>
                        {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:null}
                    </Col>

                </Row>
                <br></br>
                <div className="row">
                <Col xs={12} md={4} mdOffset={4}>
                <button className="hover-button hover-button1" onClick={this.startResults} style={{cursor: "pointer",display: "block",margin: "0 auto",color:"white",width:"50%",height:"36px",border:"none"}}>Start Inference</button>
                <br></br>
                <button className="hover-button hover-button1" onClick={this.stopResults} style={{cursor: "pointer",display: "block",margin: "0 auto",color:"white",width:"50%",height:"36px",border:"none"}}>Stop Inference</button>
                </Col>

                {/* <div className="col-sm-12">
                <div className="col-sm-6"> </div>
                    <div className="col-sm-6">

                    </div>

                </div>
                </div> */}
                </div>


            </Grid>
        );
    }
}

the user will click on start interference and runinfinite will run and the request will be sending and will receive image which will be display in render and when click on stop it stops the function.But while running the chrome caches become full.I have tried unregister the service worker in index.js but still not working.

Answer 1

For clear cache memory in reactjs, there is a package called react-clear-cache using this you can easily clear cache memory. link