Hot module replacement in create react app (cra)

Problem:
In real projects with even minor complexity reloading of pages at each change in code becomes slower and slower. Luckly there is hot module replacment/fast refresh settings that can be done in CRA apps.
Solution:
Easy way to integrate hot module replacement in react (CRA) apps

1) Install dependencies

npm install -D react-app-rewired customize-cra customize-cra-react-refresh```

2) Create config-overrides.js in your project root folder (if it does not exists, which normally is the case)
3) Add following code in config-overrides.js file

const { override } = require("customize-cra");
const { addReactRefresh } = require("customize-cra-react-refresh");

/* config-overrides.js */
module.exports = override(addReactRefresh());

4) Change your start, build scripts to use installed plugins

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

note: I also set the env variable FAST_REFRESH=true as proposed by official react documentation in .env file (create a file named .env in your root folder and place this single line in it FAST_REFRESH=true) although I am not sure it is still needed after setting up these plugins.

Main source of this text is this github repo (link below). I mentioned some pointers here for my own convience and future reference and also for dev.to community ;).
https://github.com/esetnik/customize-cra-react-refresh