I am learning React and working on a sample project. It runs very slow on mobile browsers, images take too much time to download even though I am passing low resolution versions in API call. Anyone has any feedback on how to make those images download quickly in mobile? What are the best ways to handle props being passed to Child component? Github: https://wwestars.netlify.app | https://github.com/tpkahlon/javascript/tree/master/wwesuperstars.
Hi, seems to that the images are getting
Status Code: 429
The HTTP 429 Too Many Requests response status code indicates the user has sent too many requests in a given amount of time (“rate limiting”).
Why don’t you get the collection of images in your root repository and load them from there instead of having over 100 get request from that api?
I am not familiar with api giphy.com but could you load a collection in one request ? And having a promise to wait for the response ? When promise fulfils you can set state with the whole collection of images and then return in the Card?
Adding props to render method is useless in Card component.
On the positive side, I like the way you wrote the components, clean es6, modular. Good job. One thing to be aware:
<div className='card__thumbnail'><img src={this.state.image} alt={this.props.name}></img></div>
When you return state like this you want to be sure that you got that state. I see that you initiate your state as null, what if the first render fails(in your case it fails and you have no catch to handle that rejection ) and you never get an image? Do you want that div rendered?
If no is good to check against the state before the render method returns.
Could be this.state.image not null ? the div if not null : or something else instead or maybe null