(i.e. App renders and passes props to children - Settings and Timer)
Timer needs to be updated every 1s, so I end up also updating Settings, because it’s in the same render() call. This is not necessary so in the Settings shouldComponentUpdate() hook I prevent Settings from updating unless any of the new props carry values that are different from the current ones, by comparing them one by one:
so I end up also updating Settings, because it’s in the same render() call
I’m not exactly sure when you mean by this but this is likely the cause of your problem. You should have the Timer component be totally independent from the Settings component. Timer can manage it’s own state and shouldn’t care about what settings is doing. Likewise, settings manages it’s own state and props and doesn’t care about what timer is doing.
So the ticker is rendering every second because it is displaying the tick value in an h1 tag and the browser needs to paint that. However, nothing is changing within settings so it renders once
Sure - you could do something like let <App/> know when the state of the clock has switched to from “running” to “paused”, and then app will pass the “paused” prop down into <Settings/> and then settings will update.
In this case you’re basically using <App> as a state manager for its children which I think is pretty good for a small app like the pomodoro. For a large app you would probably just want to use Redux