warning with version v2.2.1 on next.js

[Vinicius Oliveira]

I'm trying your lib with next.js and been great so far, but with version v2.2.1 I'm getting a warning on the next.js server:

The example component I'm rendering is this one:

import React from 'react'
import recycle from 'recycle'
import { Observable } from 'rxjs'

const Timer = recycle({
  initialState: {
    secondsElapsed: 0,
    counter: 0,
  },

  update(sources) {
    return [
      sources.select(Button).addListener('onClick').reducer(state =>
        Object.assign({}, state, {
          counter: state.counter + 1,
        }),
      ),

      Observable.interval(1000).reducer(state =>
        Object.assign({}, state, {
          secondsElapsed: state.secondsElapsed + 1,
        }),
      ),
    ]
  },

  view(props: propsType, state) {
    return (
      <div>
        <div>Seconds Elapsed: {state.secondsElapsed}</div>
        <div>Times Clicked: {state.counter}</div>
        <button className="button">Click Me</button>
      </div>
    )
  },
})

export default Timer

When I comment out the Observable with the interval the warnings go away.

I've fixed the 2.2.0 version in the package.json that don't have this problem.

[Domagoj Kriskovic]

Well, this is actually expected behavior. Version 2.2.0. had a bug and setState was never invoked on the server (or in tests using enzyme)

The problem here is that your update stream is "alive" even after component is rendered (because Observable.interval() keeps counting).
If you decide to use classical React component with setInterval you would see the same thing.

You should somehow "stop" your update function using RxJS operators like take, takeUntil, takeWhile or similar.

By the way, you don't have to use Object.assign() - this is already done by Recycle.

[Vinicius Oliveira]

I used skipUntil and it works.

I will update my code to remove Object.assign().

Thanks!

[Domagoj Kriskovic]

🎉