React App.js doesn't update when making change but other components do

Question

This is my first time using react and I'm using it with Django. I have an index.js that renders the Component App into an id=root element and in the App's body, I have placed an h1 tag and another Component called HomePage which has been imported. When I first start the server and the webpack, the App component updates normally for about 10 seconds but after that, any changes to the App.js doesn't update. The component HomePage however does update when the App component doesn't. My guess is that main.js isn't updating, any help would be appreciated. index.js

//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { render } from 'react-dom';
import App from './components/App';


ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import HomePage from './HomePage';

function App(){
    
    return(
        <div>
            <HomePage />
            <h1>Welcome</h1>
            
        </div>
    );
}
export default App;

HomePage.js

import React, { Component } from 'react';


const HomePage = () => {
    return (
        <div>
            <h1>Home </h1>
        </div>
    );
}

export default HomePage;

What do you mean by updating? These components are static and no state is being changed. They'll only render the same result. — Thales Kenne, Mar 15 '21 at 23:46
like any change to the file. Like changing the h1 tag from 'Welcome' to 'Welcome Sam' or adding any other component to App.js file — sam rafiei, Mar 15 '21 at 23:48

score 1 · Answer 1 · answered Mar 15 '21 at 23:57

I solved my issue, seems that react is looking for the App.js in the src folder alongside index.js and I had mine in the Components folder with the other Components. after moving it to the src folder and updating the imports my App started updating normally.

score 0 · Answer 2 · answered Oct 24 '22 at 09:36

This issue took me a while to resolve yesterday. These are some troubleshooting you may try:

Try going to a new directory and initiating another react app. You could also, compare files, boilerplate codes, and folder structure of another working app to see what might have gone wrong.
In your index.js, you could also try:

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(, document.getElementById("root"));
You could also try using a third-party react initialization tool like viteJs.

score 0 · Answer 3 · answered Jan 23 '23 at 14:50

Bro, I had the exact same problem and, in my case, to solve it was pretty easy

I was saving the files of the components with CAPS LOCKS ON and importing them with CAPS LOCKS OFF

I saw a similiar error over here in your code:

import App from './components/App';

In windows, those kinds of problem are pretty common since we are dealing in a system there is not case sensitive

I hope I helped you!

React App.js doesn't update when making change but other components do

3 Answers3