Force DOM flush for printing purposes

[danielkcz]

Two years ago there was issue #11876 about printing. Sync DOM flush was recommended by @gaearon. However, with the latest React this does not seem to work anymore. It even seems that it somehow breaks the application, no print preview is ever displayed and sandbox preview cannot be reloaded anymore. It feels like an endless loop or something.

https://codesandbox.io/s/youthful-brown-0b6ez

I wonder if there is a new recommended way how to force DOM flush for correct printing experience.

[aweary]

That's really strange how it seems to break the sandbox without any errors. Can you reproduce this with a non-hosted version, like with create-react-app?

[danielkcz]

@aweary You can just download that sandbox (File->Export to ZIP) which already is CRA based app. I can confirm the same behavior when running it locally.

[aweary]

I think this is likely the same problem as #16734.

[danielkcz]

Yea, that seems highly likely.

So I guess there isn't any viable workaround currently to have an in-app button for printing. That's bummer for touch devices with printing capabilities.

[aweary]

@FredyC for what it’s worth, the bug should only exist in the development build. So theoretically you could ship it to production and it would work as expected. You’d just have to test the feature with a production build as well. Not ideal, but at least doable if it’s blocking you.

[danielkcz]

That's definitely interesting realization, did not know about it. I tried to run a production build of that sandbox and it indeed does work. It's ok for us to disable the print button in development to avoid accidental freezes. If only it would be possible to force print styling for the whole page so it's possible to see how it will look like. I guess Ctrl+P will have to suffice :) Either way, thanks a lot at least for that.