The Publisher-Subscriber Pattern in React

Stopwatch Demo Consider building a stopwatch component like the one below: Interactive or embedded content omitted — see the original post: https://isaacfei.com/posts/react-publister-subscriber 🤔 Some thoughts: The stopwatch should manage the state on its own. We should not lift the state up since it is updating actively. Lifting the state up to its parent would lead to frequent rerendering of the parent component, potentially degrading performance, especially if the parent includes heavy components or complex logic. We want to start, stop and reset the stopwatch anywhere and anytime as we see fit. When the stopwatch is started, stopped, reset or when it is ticking, we want to invoke some logic accordingly. Shall we do this by setting callbacks, like onStart , onStop , ...? Or we can do something else? Gerneral Idea Define a controller StopwatchController and a compoenent Stopwatch . The controller will implement methods like start , stop and reset . The component takes the controller