Countdown with callback and React hooks

When writing a code it’s good to be consistent and wisely use patterns like events, hooks or streams. It’s very important to make a right choice for your architecture. These patterns can solve most of programming challenges. But it is not good to overuse any of those even for the consistency. You know it’s possible to make a hole in the wall using a screwdriver. The same is for solving every issue using one pattern.

Clock countdown requirement

Requirement is simple and well defined. Application supposed to display clock countdown. When counts down, app should refresh all data it displays by requesting it again to REST api and then reset clock countdown. Sounds simple? Indeed it was.

We will be using context for sharing data between components and Axios hooks for fetching. No other additional tool to handle async actions triggers, no dispatchers nor anything else that could make work for us. Below I will present code samples which can be used by anyone of you struggling with similar problems.

This is the simple and easy way of implementing clock countdown with callback using react hooks. Thanks to this implementation we can register as many callbacks as we need in multiple components. Each of them will be triggered on refresh in Counter.

If you like this story and my previous stories, don’t forget to leave a clap. If you are interested in reading more topics like this, follow me and my company Medium. This is very nice way to let the author know that someone enjoys his publications and gives a motivation to work even harder and share experience which is priceless.