Problem with React Leaderboard [SOLVED]

Having just finished a working version of the leaderboard I ran into a problem.

Request:
Please point me in the right direction as to why the problem is occurring. Also any remarks as to code clarity and quality are appreciated.

Problem:
switching between “alltime” and “30day” causes the display to flicker based on how many times you switch between the two options.

Codepen:

Problem fixed - removed reference to the update function from the render body itself and moved it into:

  • a clickhandler for change and
  • componentDidmount for initial display

works nicely now.

Quick code review.


CSS

Stick to one type of class names (dataitem, recentLink). I use my-cool-class. And btw, writingeverythinginoneword should be avoided (dataitem :unamused:)
And I think the font you’re trying to use is called Verdana


React

If you make both requests when app loads and save both to state you can switch instantly between both lists and no further network requests required (you could add functionality to periodically fetch in the background, say, every hour). Also FCC has limit on their API so this is the best approach here.

Accessing elements with document.getElementBy... is not a very “react way”.

I made some refactorings in your code (I’m not saying it’s the best way to do it, just one of the ways):

Also there is ‘Tidy JS’ option in CodePen to help format your code.

1 Like

Thank you :slight_smile: Will read through the pen to take a look at all the things you mentioned here. Great job!