Design comparison
Solution retrospective
Hi guys! This was a fun challenge that took me 80min to finish, I have a couple questions and would appreciate answers:
1 - Is there a better way to change images according to devise size (Desktop or Mobile) 2 - Sometimes the webapp renders twice the first time it loads which results in two subsequent api calls that display two advices in a row. How can I avoid this additional render?
Feel free to suggest additional improvement Thank you
Community feedback
- @dillon-porterPosted over 2 years ago
Hi Ismail,
I can try to help with the 2nd part. It might be a caching issue. You can try adding: {cache: "no-cache"} to the end of your fetch code.
For example, const { slip } = await (await fetch("https://api.adviceslip.com/advice", {cache: "no-cache"})).json();
0@itbeginswithiPosted over 2 years ago@dillon-porter Thanks Dillon for your suggestion,
The issue turned out to be due to React.strictMode which renders components twice (on dev but not production) in order to detect any problems with the code and warn you about them. Removing the React.strictMode from index.js solved the problem.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord