Reactjs Expressjs – Why isn’t my React.js code using updated code from my Express server, but instead old code, even after I refresh the webpage?

I am developing a React.js-Express.js website, and I had set up some basic code with the help of an online example. I had Express.js send an array to the frontend to display it after parsing. However, when I changed the array just a little – literally changed a string to another string – my frontend did not update.

Express – users.js file

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  //res.send('respond with a resource');

  res.json([{
    id: 1,
    username: "bye" //I changed this string (used to be "samsepi0l")
  }, {
    id: 2,
    username: "hi" //And this string (used to be "D0loresH4ze")
  }]);
});

module.exports = router;

React – About.js file

import React from 'react'
// import { Link } from 'react-router-dom'
import { Header } from './Header'

export class About extends React.Component {
    state = {users: []}

    componentDidMount() {
      fetch('/users')
        .then(res => res.json())
        .then(users => this.setState({ users }));
    }

    render() {
        return (
            <div>
                <Header />
                <h2 id="other_pages_h2">About</h2>
                <div>
                    <h1>Users</h1>
                    {this.state.users.map(user =>
                        <div key={user.id} style={{color: 'white'}}>{user.username}</div>
                    )}
                </div>
            </div>            
        )
    }
}

For some reason, the /about page still displays “samsepi0l” and “D0loresH4ze”. How can I fix this?

Answer

This is likely caused by the infamous cache. Usually just hitting Crtl + F5 will fix this, if that doesn’t work, clear your browser history.

If you’re still running into the same problem, then you didn’t save the file and/or restart the server since the code change.