Gatsby keeps on adding strings for every change made

[U-C-S]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Title might do a poor job of explaining what the issue is about. Ignore it and also, Forgive my poor explanation skills.

I discovered this issue when I was using static directory for images i.e static/images/someimg.png. I created a json file which contains some data and respective image name like below:

{
  "image-root": "images/",
  "someData": [
    {
      "name": "doggy",
      "image": "puppy.png"
    },
    {
      "name": "Cat",
      "image": "meow.png"
    }
  ]
}

Since, the files in static folder are directly moved to build output. So, image-root is used to prevent unnecessary repeating of image path.
and Now, I use the data using the following code

class IndexPage extends React.Component {
  render() {
    let CardsWithData = data.someData.map((x) => {
      x.image = data["image-root"] + x.image;
      //check the browser console after making a change in this file
      //Multiple string additions happen here. But when page is reloaded it works fine.
      console.log(x.image);
      return <Cards key={x.name} data={x} />;
    });

    return <div>{CardsWithData}</div>;
  }
}

Reproduction Link

https://github.com/U-C-S/Gatsby-Bug-Reproduce

Steps to Reproduce

1. Clone my repo using the link above
2. npm run start
3. Notice the console output that prints some paths
4. Make some changes in src/pages/index.tsx
5. Now, Again check the paths printed in browser console

Expected Result

Actual Result

The path keeps on adding themselves for every change that's made.
They go back to normal when the page is reloaded.

I believe this is a issue due to improper cache

The issue occurs for other strings, numbers ......

Environment

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-4810MQ CPU @ 2.80GHz
  Binaries:
    Node: 16.4.2 - C:\Program Files\nodejs\node.EXE
    npm: 7.18.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.70)
  npmPackages:
    gatsby: ^3.9.1 => 3.9.1

Config Flags

No response

[LekoArts]

Hi!

This is not a problem with Gatsby but your code. You're mutating the value that you're then later use:

let imgPath = data["image-root"] + x.image;
x.image = imgPath;

You also might be missing a leading slash in front of the URL.

Please see these docs for further reference:

• https://www.gatsbyjs.com/docs/how-to/images-and-media/importing-assets-into-files/#importing-assets-with-webpack
• https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/

[U-C-S]

You're mutating the value that you're then later use:

Yeh, Seems You're right..... So, it's just how hot-reload works. That answers it.😅 Thanks