react-redux-universal-hot-example
react-redux-universal-hot-example copied to clipboard
react-redux-universal-hot-example still has FUOC?
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.
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
@jaraquistain FOUC isn't "bad" per se, right? It won't negatively affect anything?
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.
@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.
@jaraquistain agreed. I'm getting more comfortable with it as it really only affects the first page render. After that, all's good!
@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;
@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