How to resolve FOUC (Flash of unstyled content) using React components?

Question

As the title says, how do you guys solve FOUC problem with React components? As my React components get mounted and componentDidMount handler gets called, I bind to various JQeuryUI widgets. This is where the FOUC happens.

Maybe this would help: https://stackoverflow.com/questions/50694118/how-to-resolve-fouc-in-react-js/50727768#50727768 — turkus, Jun 06 '18 at 19:05

score 2 · Answer 1 · answered Feb 17 '15 at 00:34

2

1) Try rendering the DOM on the server side: https://github.com/mhart/react-server-example

2) Try to not use jQuery plugins. Find or rewrite it in React. Here's a site that contains a lot of react components: http://react.rocks

answered Feb 17 '15 at 00:34

Maktouch

3,117
20
21

5

"Try to not use jQuery plugins -> rewrite it in React.". It's Angular all over again. And in 3 years there is another player and we're doing this again... *sigh* – ProblemsOfSumit Jan 30 '16 at 17:44
1

Welcome to the frontend world :-) – Maktouch Feb 03 '16 at 16:51
By using jQuery you're depending on a framework which doesn't necessarily play nice with others – Ben Taliadoros Mar 22 '16 at 15:04

How to resolve FOUC (Flash of unstyled content) using React components?

1 Answers1