# Help with Leaderboard React timing problem \[SOLVED\] **URL:** \ **Category:** General\ **Tags:** help, react, leaderboard\ **Created:** [June 23, 2017, 9:00pm UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099 "2017-06-23T21:00:36Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![hsribei1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hsribei1/32/161863_2.png) [@hsribei1](https://forum.freecodecamp.org/u/hsribei1)\ **Post date:** [June 23, 2017, 9:00pm UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099/1 "2017-06-23T21:00:37Z")
I’m having a timing issue in the Free Code Camp Leaderboard project. It’s working fine if you click on the headers to sort by **recent** or **alltime** _and wait for the request to finish_. If you click on alltime then back to recent **really fast** , it keeps listing the alltime users and remains inconsistent. Works that way vice-versa as well. Any idea how I can track this bug, please? I’d appreciate any help. I’m using `componentDidMount` and `componentDidUpdate` for the ajax calls. The code is live at: [https://codesandbox.io/s/MjLyDP91R](https://codesandbox.io/s/MjLyDP91R) Thank you very much! ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [June 23, 2017, 9:17pm UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099/2 "2017-06-23T21:17:10Z")
I think I did mine differently. I only did the ajax call once, when the program loaded. I worked on the assumption that the leader board wasn’t going to be changing minute by minute. I just loaded the data once and sorted by that. I don’t think there is a need to check if it has changed in the last 4 seconds. If you really, really want to do that, you could perhaps disable the sorting buttons while a fetch is taking place. Or you can put logic in to the _fetchUsers()_ so it won’t run if a fetch in progress, like create a boolean variable in the state, like _isFetching_ and set it to _true_ when you enter _fetchUsers()_ and reset it to _false_ in the callback to the fetch. Then when you first enter _fetchUsers()_ you can check to see if it is set. There might be a smarter way to do it, but that should work. But again, I don’t see any reason to fetch that data more than once. ---
**Author:** ![hsribei1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hsribei1/32/161863_2.png) [@hsribei1](https://forum.freecodecamp.org/u/hsribei1)\ **Post date:** [June 26, 2017, 8:59pm UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099/3 "2017-06-26T20:59:42Z")
Hi @ksjazzguitar, I ended up doing both things you suggested: putting the logic for a `loading` state in `fetchUsers()` to avoid making a request when one is already under way, and using the same `loading` value in the `render` method to disable the link while waiting for the request to arrive. That solved the problem, so thank you for the suggestions! I still don’t understand exactly what was causing the problem in the first place, so if you have tips or tools on how to track down stuff like this in the future I’d love to hear them. * * * About making the request only when the application loads: you mean you make **both** requests, that is, for `recent` and for `alltime`, in the beginning, then only switch between them in the UI? That seems like a good idea. One thing to watch out for is that if you make only _one_ request in the beginning, you get only one set of users right. For example: 1. you make the request for `recent` 2. the user clicks `alltime` 3. you just sort the array in javascript by the `alltime` property If you do that, you’ll only get the top recent users sorted by alltime, not the true overall alltime. For instance, if the number 1 alltime user hasn’t been active in the past 30 days, she won’t show up at all. ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [June 27, 2017, 5:56am UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099/4 "2017-06-27T05:56:14Z")
In my state I have a variable: ```auto campers: { alltime: [], recent: [] } ``` It is two arrays of users. I make two ajax calls to fill them up with the relevant data. Then, depending on which is selected, I _map_ through the relevant array by selecting it. In my _CamperList_ component I have the line: ```auto { this.props.campers[this.props.sort].map(function(camper, i) { return ( ) }) } ``` Where _this.props.sort_ tells it which array to use and the component _Camper_ creates the _li_ for each camper that is mapped out inside the _ul_ in _CamperList_. So it’s two completely separate sets of data and React will map the correct one, whichever value _this.props.sort_ is set to, either “alltime” or “recent”. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 8:55pm UTC](https://forum.freecodecamp.org/t/help-with-leaderboard-react-timing-problem-solved/131099/5 "2021-01-17T20:55:11Z")
Closed on January 17, 2021, 8:55pm UTC