Clojurians Log v2

I’m going from having fun with React experimental to tearing my hair out 🙂 I’m seeing things double: I’m adding subscriptions to an atom, and it seems that react is doing things twice but monkey-patching console.log 🙂 so the usual println debugging doesn’t work.

hmm it's definitely not monkey patching console.log

with the development bundle, React experimental will render your components twice as a sort of heuristic to check to make sure your components are concurrent mode safe

if you paste some code / push a repro I can take a look

@orestis your components should work independent how many time render are called, this is true with class components and old react as well, no?

by default you get called twice afaik, once with nulls and once when it's completed, or any number of times between.

Oh I don’t mind getting called twice - but I expected the hooks to apply only once.

So I use useEffect to subscribe to a store. I print the subscriptions to the store at the store level. The subscriptions are backed by an atom. I see 1 subscription printed, but after render is finished, my atom contains 2. Unless someone is monkeying with console log, I should see two prints too.

There’s also Suspense in all this, and I’m not sure how Suspense comes in the lifecycle. Or if there’s a bug in the build I’m using :)

I’m trying to figure out nested suspense boundaries and why my component stays suspended, and I ran into this weirdness above. I’ll keep noodling :)

could be thrown, swallowed

I would start small, and build up one by one, not try everything at once 🙂

but that's just me 😄

I did 🙂

The specific thing I’m trying to test is nested components suspending to a single outer suspense boundary. Something is weird at the first render. If shadow hot-reloads and calls render again at the concurrent root, everything clicks together.

I realize that without any code this is probably inscrutable to everyone except me :)

we all agree on that at least 😄

but if shadow, and if it's development mode, it has its hooks, I am sure you are using them, I mention them just to be doubly sure

here's what I've been experimenting with the last couple weeks: https://github.com/Lokeh/pine

https://github.com/orestis/reseda

This is my attempt. The first demo is a copy of reagent’s demo, BMI calculator. The second attempt fetches some remote stuff, and is trying to use Suspense. I can see the promises resolving, but my components don’t resume. Any pointers welcome.

Of course, now I found the issue — you shouldn’t provide React a never-resuming Suspense. However it’s counter-intuitive to me, unless something was raised and caught inside React which I never saw.

I’ll be pushing things to reseda over the coming weeks. Interested to hear feedback about the general approach. Once I’m reasonably confident that it can be used to build a real app I will probably make a more general announcement.

It only seems to be an issue in the initial render. If I do it manually (at the REPL) it recovers when provided a correct value. I’ll be making a sandbox to see if it’s a React issue.