where to set `setInterval` when working with recompose?

Question

I'm trying to build a simple timer that will start and stop on click. all my project is functional component based (using recompose), so I'm not sure where to set the setInterval.

here is a thing I tried to play with until I was completely lost where to store the setInterval so I'll be able to clear it on onStop fn (that will fire on a button) - as in functional component there is no this that I can put the timer and remove it from ... what's the functional components way of doing it ?

https://codepen.io/anon/pen/jQQZrm?editors=0010

any suggestions ? - using react-native thanks.

Answer 1

You need here 3 different state handlers: stopTimer, startTimer and updateValue(I've used slightly different naming than your code did).

In startTimer you need to create timer that runs updateValue by timer. In other words you need to call indirectly one state handler from another.

There is no way doing that. But. You can split those handlers into 2 sets: "value + updateValue" and "stopTimer + startTimer + intervalId". Then you will be able to get state handlers from first set in second as props:

const EnchanceApp = compose(
  withStateHandlers({
    timer: 0,
  }, {
    updateValue: ({timer}) => 
        () => ({timer: timer + 1})
  }),
  withStateHandlers({
    timerId: 0,
  }, {
    startTimer: ({timerId}, {updateValue}) => 
        () => {
            clearInterval(timerId);
            return {
                timerId: setInterval(updateValue, 1000)
            };
        },
    stopTimer: ({timerId}) => 
        () => clearInterval(timerId)
  })
)(App);