facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.78k stars 26.87k forks source link

Application keeps reloading on component state changes sometimes and sometimes it's working just fine, It usually happens when my app is idle for sometime may be around 1 minute. #5417

Closed mukesh-n-crest closed 6 years ago

mukesh-n-crest commented 6 years ago

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

=> Unwanted hard reload on component state changes. => Automatic hard reload on react app. => Reload => Is combined use of withRouter, PureComponent & connect cause full page reload. => Is background-image: url("") in css may cause full page reload.

Environment

Environment: OS: Windows 10 Node: 8.11.3 Yarn: 1.10.1 npm: 6.4.1 Watchman: Not Found Xcode: N/A Android Studio: Not Found

Packages: (wanted => installed) react: ^16.5.2 => 16.5.2 react-dom: ^16.5.2 => 16.5.2 react-scripts: 1.1.4 => 1.1.4

Steps to Reproduce

(Write your steps here:)

  1. after installing create-react-app, I have install npm dependancies.
  2. setup sass vie external command by editing package.json with a new command npm run sass.
  3. now, I'm running two terminal for npm start and npm run sass.
  4. now, application is running properly on port 3000.
  5. in my application i'm usingreact-router-dom for navigation and it's working properly sometime and sometime now and sometime just setState of a child component cause full page reload too.

Expected Behavior

According to my experience with create-react-app, i have didn't found this behaviour in my old applications, app should refresh only if a file within project is modified by developer.

Actual Behavior

I'm attaching a screencast(video) here, https://www.screencast.com/t/GMH5hidjSxif

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

andriijas commented 6 years ago

This sound like an application error. CRA doesnt reaload your app based on component state changes.

You are likely to get better and more accurate support at forums like stackoverflow for this kind of issue. Dont forget the reproducible demo link.

That said; Do you get any javascript error in the dev tools console before the reload?

mukesh-n-crest commented 6 years ago

Hey @andriijas ,

This is the screenshot of console while reload happens: https://www.screencast.com/t/WpAClwMgPHm

Thanks for the feedback

mukesh-n-crest commented 6 years ago

here is my package.json file

{ "name": "appname", "version": "0.1.0", "private": true, "dependencies": { "apollo-boost": "^0.1.16", "apollo-link-ws": "^1.0.9", "chart.js": "^2.7.2", "chroma-js": "^1.4.0", "classnames": "^2.2.6", "faker": "^4.1.0", "fullcalendar": "^3.9.0", "fullcalendar-scheduler": "^1.9.4", "graphql": "^14.0.2", "graphql-tag": "^2.10.0", "jquery": "^3.3.1", "lodash": "^4.17.11", "moment": "^2.22.2", "numeral": "^2.0.6", "payment": "^2.3.0", "prop-types": "^15.6.2", "query-string": "^5.1.1", "react": "^16.5.2", "react-apollo": "^2.2.4", "react-bootstrap": "^1.0.0-beta.1", "react-custom-scrollbars": "^4.2.1", "react-dom": "^16.5.2", "react-input-mask": "^2.0.4", "react-masonry-component": "^6.2.1", "react-modal": "^3.6.1", "react-redux": "^5.0.7", "react-responsive": "^5.0.0", "react-router-dom": "^4.3.1", "react-scripts": "1.1.4", "react-select": "^2.1.0", "react-slick": "^0.23.1", "react-tabs": "^2.3.0", "reapop": "^2.0.0", "rebound": "^0.1.0", "redux": "^4.0.0", "redux-devtools-extension": "^2.13.5", "redux-thunk": "^2.3.0", "slick-carousel": "^1.8.1", "styled-components": "^3.4.9", "subscriptions-transport-ws": "^0.9.15", "zipcodes": "^6.1.0" }, "scripts": { "start": "react-scripts start", "build": "yarn sass:build && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "sass": "sass --watch src/styles/scss/main.scss:src/styles/css/main.css", "sass:build": "sass src/styles/scss/main.scss:src/styles/css/main.css" } }

I hope this will help

andriijas commented 6 years ago

Not really. What makes you think the cause of the issue is in react-scripts and not in any of the other dependencies you added or applicaiton code? If you don't have any specific that points to an eventuall issue with CRA, we cant help you in this forum unfortunately.