0

I have a component which is rendering some values with image id of the s3 bucket. have created one child component which will call to aws server and get image URL. have set loader until API call is in progress. after URL will be received from the call, the loader will stop and an image will be rendered.

Problem: i have some operation on values to be performed. like maintaining values, increment-decrements.

while updating states, a component will be remount. and again image API will be called and loaded.

shouldComponentUpdate won't work. because if I will use it, it will not display changes on the screen.

have set loader till image loads. but it's not a valid thing to show loader on each button click. looking for some better solution. stuck on the issue from past 12 hours. will be really thankful if someone can help me to get rid of this.

Thank You.

Ashish
  • 573
  • 3
  • 19
  • Could you include some of your component code? Would help in answering the question. – Cameron Downer Aug 24 '18 at 10:11
  • @CameronDowner have updated the question. please check it. – Ashish Aug 24 '18 at 10:15
  • Could you include `` as well please? I think this may be where the issue is. – Cameron Downer Aug 24 '18 at 10:18
  • no there isn't any issue in load image. everything is working fine there. what i want here is, i don't want images to be remount. Component is simply getting id's from here and make calls to s3 bucket to get urls. and place that url to img tag. – Ashish Aug 24 '18 at 10:20
  • @CameronDowner, still have updated my question. you can see loadImage component code there – Ashish Aug 24 '18 at 10:22

1 Answers1

1

I think the issues is in the componentWillReceiveProps method within <LoadImage />

componentWillReceiveProps(nextProps){
        if (this.props !== nextProps) {
            this.setState({
                image:DefaultImage,
                loading:true
            })
            this._loadImages(nextProps)
        }else{
            this.setState({
                loading: false,
            })
        }
    }

You are calling this._loadImages(nextProps), which can be called again and again as props are passed into from the owner component.

Even though you are doing a comparison on the incoming props, this.props !== nextProps will always be true because they are both objects. You can see some questions on this.

You will be better doing comparisons on the particular props you are concerned with - if this is the way you want to go.

Also to be noted componentWillReceiveProps is deprecate, you should look into getDerivedStateFromProps. View the docs here.

Cameron Downer
  • 1,641
  • 15
  • 24