Hot Reload not working properly

[Sadam-MCA]

Branch: master
Node: 14

I have updated the code on the JS and CSS file but it does not reflect on a webpage. The code will reflect When I refresh the page.

I have attached the video link: https://drive.google.com/drive/folders/1qkP1LPaY6cwuIw0fF6Wdj14X8O5UVdF0

[koistya]

@Sadam-MCA I can only reproduce it if I try using anonymous functions when declaring React components:

// GOOD
export function Example(): JSX.Element {
  return <Box>...</Box>;
}

-- vs --

// BAD
export const Example: React.FC = () => {
  return <Box>...</Box>;
};

If you're using anonymous function, consider giving them names, otherwise you may bump into issues like this one. This particular issue is not related to the starter kit but Fast Refresh limitations I believe. Please provide more info if Hot Reloading (Fast Refresh) is not working under some other condition.

Learn more

• [StackOverflow] Anonymous arrow functions cause Fast Refresh to not preserve local component state
• [Medium] Do not use anonymous functions to construct React functional components

[Sadam-MCA]

Thank you for your response. The issues are not fixed yet. I have attached the video also

#1995

[koistya]

@Sadam-MCA note that the master branch that you pulled is an archived version of the previous iteration of the template that is a few years old. The latest version is using TypeScript and Vite code bundler that has built-in hot reloading (React Refresh) functionality out of the box, without a need to configure anything.

I would highly recommend using the latest version from the main branch.

[koistya]

If you're forced to use the previous starter kit version from the master (archived) branch, you would need to skim through this Webpack plugin's documentation and ensure that it's in place and configured as the README instructs:

https://github.com/pmmmwh/react-refresh-webpack-plugin