Automatic Cache Busting in a React Build

You should already know that browsers have a static cache problem. The essence of the problem is that to improve performance, the browser caches style files, scripts, and images.

This means that if you change something in your scripts or styles on the hosting, the changes will only appear for new website visitors. Returning visitors, who have been to the site before, will see the cached version of the code. This, of course, is unacceptable.

Fortunately, in React, this problem is solved automatically. The solution is that the build files, in addition to the name and extension, have a random string called a hash. This hash corresponds to the content of the file. This means that when the code in the file changes, the hash in its name will also change. Thus, the browser will think that it is a new file and will download it.

We can observe the file hashes when they are included in index.html: