Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator | React + API

Ismail 230

@itbeginswithi

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

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-porter

Posted

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

Ismail 230

@itbeginswithi

Posted

@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
Discord logo

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