Fork me on GitHub
#reagent
<
2017-06-15
>
yanglin02:06:12

Hi! So I have this strange issue involving chrome and background tabs. Maybe someone who knows reagent well can help me πŸ™‚

yanglin02:06:25

So the simplest repro I could come up with is a counter component. Here's one in react:

yanglin02:06:45

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {counter: 0};
    this.tick = this.tick.bind(this);
  }

  tick() {
    this.setState((prev) => ({counter: prev.counter + 1}));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  render() {
    console.log('render');
    return <h1>Counter: {this.state.counter}</h1>;
  }
}

yanglin02:06:06

and here's the same thing in reagent:

yanglin02:06:24

(def counter (r/atom 0))

(js/setInterval #(swap! counter inc) 1000)

(defn app []
   (js/console.log "render")
   [:h1 (str "Counter: " @counter)])

yanglin02:06:48

Notice the console.log in the render of both.

yanglin02:06:22

With the Chrome console open, if I follow these steps:

1. refresh the page
2. wait ~10 seconds
3. switch to a different tab
4. wait ~10 seconds
5. switch back to the original tab

yanglin02:06:55

In the react version, I'll have the same number of render calls as the counter. In the reagent version, it seems that for the duration that the tab is in the background, render isn't called. I'm a bit stumped on whether this is expected, and whether this is a chrome background tab throttling magic vs reagent magic.

souenzzo03:06:30

It's a problem?

dimovich05:06:22

Is it possible to include via :foreign-libs a file like this? What is the correct way to do it?

dimovich05:06:15

so I don't have to go through npm

yanglin10:06:13

@souenzzo it shouldn't be, but I was debugging an issue with a particular library I was using, react-player. I'm trying to make a YouTube player as a hobby project, so it's important to be able to play the next video if a previous video has ended. Basically with the react version it's working as expected, but with the reagent version I'm not able to skip songs while in a background tab

yanglin10:06:16

I was curious if anyone knew why the render call behaved this way in a background tab

pesterhazy11:06:57

@yanglin I know nothing about background tabs, but one difference between using setState and reagent is that reagent batches updates by default: https://reagent-project.github.io/news/reagent-is-async.html and defers updated (until the next tick?): "Reagent waits until the browser is ready to repaint the window"

pesterhazy11:06:34

maybe that doesn't happen if the window is in the background

pesterhazy11:06:06

you could try using r/force-update

jvuillermet13:06:52

@yanglin I had the exact same problem

jvuillermet13:06:57

my issues should still be on the repo

jvuillermet13:06:10

I ended up not using react-player but I think I found what was the difference with reagent at some point. Will try to remember but it’s quite old

jvuillermet13:06:54

yes reading the previous messages make it obvious and it was indeed the batching strategy

pesterhazy13:06:55

I know that the React devtools allow you to identify when a component updates. However, it doesn't show when a component gets unmounted and remounted completely. Is there a way to trace remounts as well?

pesterhazy13:06:51

I'm asking because it's pretty common that a parent components children get remounted completely when keys are missing

pesterhazy13:06:10

In those circumstances, it'd be great to have some way to debug

yanglin14:06:26

@pesterhazy @jvuillermet r/force-update looks promising. I'll definitely take a look later today!

yanglin00:06:35

@pesterhazy Yep r/force-update did the trick. thanks for the wisdom! πŸ˜„

yanglin00:06:01

@jvuillermet If you can find the link to the issue, I can comment on it with the fix if that hasn't been done yet.

mathpunk15:06:48

I'm trying to use reagent, and I'm definitely holding it wrong, but I'm not sure how. These things work:

mathpunk15:06:06

But these don't work:

mathpunk15:06:52

When I run this in my head, I expect things like [phone-item patient] to expand to [ui/list-item ...] forms, which I would think would be happy living inside the [ui/list ...] form.

mathpunk15:06:20

I'm misunderstanding something fundamental about reagent/react but I'm not seeing it.

dimovich16:06:11

what are you using for authentication?

mikethompson20:06:02

@mathpunk very hard for us to give much help given the information provided. Is it possible for you to provide a minimal example of what isn't working for you? Perhaps you can create a Gist like this one: https://gist.github.com/borkdude/fd61bc806e6c3096551509d22c6a68de and link it in with Klipse with a URL like this: http://app.klipse.tech/?container&amp;cljs_in.gist=borkdude/fd61bc806e6c3096551509d22c6a68de

mikethompson20:06:44

That will give something concrete to look at. But it should be as minimal as possible

mathpunk23:06:32

Also, when I load the page, the components don't appear, unless I comment them out and then uncomment them. I don't know if there's state hanging around or what, I sure am restarting figwheel a lot πŸ˜•