question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
jaraquistaincommented, Apr 15, 2016

@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.

0reactions
simran66commented, Mar 7, 2017

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styles are loaded after JS, causing annoying visual glitches.
There's a fix for this in dev mode, whereby some bootstrap styles are dumped into a style tag to head to prevent FOUC...
Read more >
Hooks
Hooks. React's new "hooks" APIs give function components the ability to use local component state, execute side effects, and more.
Read more >
react-router-redux
Start using react-router-redux in your project by running `npm i ... react-router-redux example includes css modules and universal rendering ...
Read more >
Cord blood research, banking, and transplantation
During these 30 years, research in the UCB field has transformed the hematopoietic transplantation arena. Today, scientific and clinical teams are still ......
Read more >
Higher-Order Components
HOCs are common in third-party React libraries, such as Redux's connect and ... For example, say you have a CommentList component that subscribes...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found