The title really says it all. I've seen some questions about how to keep a component from un-mounting, but I'm not sure that's exactly what I need (or at least not all that I need).
I want it to continue counting when I go to a different screen in the app.
Can anyone tell me how to approach this?
Thanks
Related
So I am using React in my frontend, have a database and stuff in my app, now I also want to create a crash minigame like some of you have probably seen before where for example there is some multiplier that starts from 1.00x and goes up and randomly crashes. I want multiple people to be able to join this game, put in their currency and keep it updated for every player on that page at the same time.
Does anyone have an idea for how I would be able to achieve this? Doing this with a database is obviously going to be too slow so what can I possibly do? Should I use websockets to do this?
I am currently learning react right now. I am following a react tutorial for a stopwatch application where it just increments the time every second. The code perfectly works as it indeed increments the time every second. However, if I open a new browser tab, or even open a different application, it seems that react doesn't update the state, meaning, the timer stops incrementing the value. But if I visit the react application, it begins to increment (once again).
I literally watch the timer go to '00:00:10' and then click another tab and wait for about 10 seconds. When I go back to the react application, the timer is still at '00:00:11', instead of '00:00:20'.
Is there something I am missing? Why is react behaving this way? It is because of performance issues? I am pretty sure this is a nature of react but I can't seem to find an explanation anywhere else.
I am also not sure if I should provide the code for the stopwatch application as I am sure that it's not a bug, nor a problem relating to the code itself. Let me know if I need to include the code so that I can edit this question.
If your website isn't active (in an active browser tab) then the Browser doesn't execute your JavaScript code. It does that to save CPU time - people tend to have a lot of tabs open.
For a timer application you want to remember the timer start time (e.g. with new Date().getTime()) and then every second you calculate the difference to this start time. This way if the user leaves the tab and comes back then the timer is correct again after latest a second.
Another benefit is that your timer will be more accurate even if the browser tab remains focused all the time. The timer calls aren't exact so your code isn't called exactly every second, but only about every second and the errors sum up over time. If you have a start time available then these errors don't matter.
Edit: There is more to this topic, the best thing I could find quickly is this discussion How do browsers pause/change Javascript when tab or window is not active?
End users in our react application have the ability to make payments to loans via a pop up. The initial problem that we encountered is that users could click the pay button twice (or heaven forbid more than twice) and this would create multiple payments throwing our accounting into disarray. We thus implemented a sort of lock state that, when triggered to true, shows a loading gif displayed in a div with a simple tweak of the z-index. The state is passed down to the pop up from 2 components above. Every now and then I get an error message displaying that there is a possible memory leak. I assume this has something to do with my fix.
I'm just wondering, is there best practice on how to handle this sort of "locking" situation with react while waiting on some other external system to respond? I've tried to do this via the front-end but I'm not 100% convinced that it's the best and/or only solution.
If you need some code to better illustrate the scenario then let me know and I'll work on adding some examples.
Thanks in advance for your advice!
There's plenty of ways of doing this. You could even had multiple layers to the process. On top of layering the page using a z-indexed loading screen, you could also disable the button depending on some form of state change.
Also, the memory leak could be from you not disposing everything after the life cycle of a particular hook ends. I would suggest you look at using useEffect as a starting point. There's a good chance that either your modal or loading indicator is causing this. Often times, this can be fixed by adding a dependency array to useEffect. Obviously, I am making a lot of assumptions here.
I have a Redux app and I am using redux-dev-tools for its debugging primarily. Unfortunately its often not enough to debug and get clear vision of which methods call which. I am looking for a way to see all of the methods called from the point I change something on the screen to the point where the updates stop. What I want to see is just a set of the relevant methods called with their lines of codes in the app. redux-dev-tools just shows the dispatched actions and then changes in the state (trace - is useful but thats very little), but thats not enough for me: I want to know full call stack excluding what is done behind the scenes by the redux itself. Are there any tools for that? How would you approach the issue? The ideal case would be the generation of some kind of chart with the call stack and lines of codes.
I can have such a situation when an action is triggered, then asynchronous request runs, then half of the page gets updated and redrawn, then another request happens, etc. I want to know better the call stack in this case. Or imagine if a single button click causes several requests to run and multiple actions to be dispatched, etc. Its for overcomplicated cases. I need to have clear diagrams/methods for better debugging and optimization.
Using the Cups c api I am able to see the state of a printer (such as paused, printing, jammed ect.) What I am trying to do now is to listen for, or lock against a change in a printer's state. Ultimately I want a live view of a printers state, but I don't want to have a delay loop spamming cups with printer attribute requests.
I have seen many functions and tags in the source code and documentation that hint towards some kind of event system, but I have been unable to figure out how to utilize it. Any help is welcome, even just pointing me towards the right function.
I used this example in my current implementation to get state information. http://cups-dev.easysw.narkive.com/9RO0OBnZ/how-to-get-printer-status-via-cups-api
It ends up this was a very complex question and involved a lot of work to figure out. The only sane way I found to listen for changes was to use the rss notification system. I would advise against attempting to make your own notification module, I wasted a week of my life trying that (I'm not even sure it is possible anymore). Use the Create-Printer-Subscription with a uri like rss://localhost:8000. You will of course need a listener waiting for the xml data.
I put up an a simple debugging tool I made with java/jna here. Select 2 to set up a subscription, you will need to listen for the data yourself though.