How to render multiple times the same component and all instances have the same state

Question

I have a counter component being passed as prop in various components in different screens of my app. What I want to succeed is the countdown to continue in the different screens. What I have achieved now is to start a countdown in each sceen. Any ideas?

Thank you!

Answer 1

If you don't want to implement Redux for this you can make use of a singleton. In this singleton you have a class that you can extend with an event emitter. Just emit the event with the current state at your desired interval.

You could even make a singleton that just simply returns the current state and let your component handle the rest of the countdown.

Lastly, the easiest way would to have it in the state of your top most component and just pass it down to all the components through props.

What I'm trying to say is that there are a lot of ways to do this without implementing Redux. Redux will be the nicest, but is often overkill for what you are using it for.