search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
11.99k stars 2.5k forks source link

react-redux-universal-hot-example still has FUOC? #1079

Open richb-hanover opened 8 years ago

richb-hanover commented 8 years ago

I am looking around for a react example as a base for a new project. react-redux-universal-hot-example came highly recommended at http://andrewhfarmer.com/starter-project/ (*). I installed it and ran npm run dev, and saw a big flash in the header of the page (first I see turquoise text left-justified on a white background, then centered on the black) when going to localhost:3000. I see this was first mentioned in September with #153

Is this still a problem? It seems like a fairly obvious issue, and that there "ought to be" a straightforward fix. Its presence six months later makes me worry that it there's some problem eliminating it, and I should look elsewhere for a base for a new project.

Am I overly concerned? Will this FUOC be fixed?

(*) Andrew Farmer's React Starter Project page lists react-redux-universal-hot-example as # 2 in the list. The first place project doesn't use Redux, and uses minimalistic (and mostly undocumented) router code in place of react-router, so I'm considering an alternative.

jaraquistain commented 8 years ago

The FOUC that you see exists only in development mode. It is there because of the JS and CSS being loaded through the development server so that they can be hot-loaded when there are changes without refreshing the page. In production the files are loaded in normally so there is no FOUC. Try running the boilerplate in production mode to see for yourself

nathanielks commented 8 years ago

@jaraquistain FOUC isn't "bad" per se, right? It won't negatively affect anything?

richb-hanover commented 8 years ago

It looks bad, and that negatively affects people's impression of the project. It makes newcomers worry that it's not finished, not working, or that "nobody cares" about fixing something that "seems so obvious."

Its presence also desensitizes you (the developer) to bad behavior. After seeing the FUOC for hundreds of debugging sessions, you're less likely to notice other visual problems 'til you do get to production.

jaraquistain commented 8 years ago

@nathanielks No it isn't "bad" for reasons besides those outlined by @richb-hanover above. Though I take the point I'm not sure I fully agree that a FOUC makes you less likely to notice other visual problems. I do agree that maybe the documentation could be more informative as to why this flash is there and how to modify the development flow if it is unacceptable in your case.

In my actual experience developing an app based on the boilerplate the FOUC in development only is a welcome compromise in order to allow the hot module reloading.

nathanielks commented 8 years ago

@jaraquistain agreed. I'm getting more comfortable with it as it really only affects the first page render. After that, all's good!

therealcisse commented 8 years ago

@richb-hanover Had this issue though not with react-redux-universal-hot-example, but turns out it was caused by differences in the localIdentName config with server-side and client-side in production mode.

Hope this helps;

simran66 commented 7 years ago

@richb-hanover : Here's how you can fix FOUC in both development and production mode : http://www.yourtechchick.com/reactjs/fix-fouc-in-react-flash-unstyled-content-react-isomorphic-application/ . Hope that helps