This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-06-15
Channels
- # aws-lambda (6)
- # beginners (8)
- # cider (12)
- # cljs-dev (12)
- # cljsrn (9)
- # clojars (2)
- # clojure (161)
- # clojure-berlin (9)
- # clojure-italy (10)
- # clojure-russia (18)
- # clojure-spec (20)
- # clojure-uk (18)
- # clojurescript (37)
- # cursive (13)
- # data-science (1)
- # datomic (23)
- # flambo (2)
- # hoplon (22)
- # immutant (11)
- # jobs (1)
- # klipse (11)
- # leiningen (5)
- # liberator (7)
- # luminus (5)
- # lumo (3)
- # off-topic (28)
- # om (8)
- # onyx (15)
- # parinfer (111)
- # pedestal (21)
- # re-frame (6)
- # reagent (38)
- # rum (4)
- # spacemacs (2)
- # specter (34)
- # unrepl (122)
- # untangled (3)
- # vim (1)
- # yada (8)
Hi! So I have this strange issue involving chrome and background tabs. Maybe someone who knows reagent well can help me π
So the simplest repro I could come up with is a counter component. Here's one in react:
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>;
}
}
(def counter (r/atom 0))
(js/setInterval #(swap! counter inc) 1000)
(defn app []
(js/console.log "render")
[:h1 (str "Counter: " @counter)])
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
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.
Is it possible to include via :foreign-libs a file like this? What is the correct way to do it?
@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
I was curious if anyone knew why the render call behaved this way in a background tab
@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"
maybe that doesn't happen if the window is in the background
you could try using r/force-update
or flush?
@yanglin I had the exact same problem
my issues should still be on the repo
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
yes reading the previous messages make it obvious and it was indeed the batching strategy
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?
I'm asking because it's pretty common that a parent components children get remounted completely when keys are missing
In those circumstances, it'd be great to have some way to debug
@pesterhazy @jvuillermet r/force-update
looks promising. I'll definitely take a look later today!
@pesterhazy Yep r/force-update
did the trick. thanks for the wisdom! π
@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.
I'm trying to use reagent, and I'm definitely holding it wrong, but I'm not sure how. These things work:
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.
I'm misunderstanding something fundamental about reagent/react but I'm not seeing it.
@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&cljs_in.gist=borkdude/fd61bc806e6c3096551509d22c6a68de
That will give something concrete to look at. But it should be as minimal as possible