Develop Reference

Changing the code of specific component doesn't trigger fast refresh

I have a component hierarchy like this:
Dashboard -> inside it:
- Table -> inside it:
- RowTable
The problem here is whenever I change the code of the Dashboard or the table, everything is working fine and the application is being refreshed, but whenever I change the component RowTable code, I can see the 'refresh' toast, but nothing is being refreshed, I need to reload the whole app to see the new changes.
I'm not sure, and I don't know if it's related, but I noticed this issue after initializing react native debugger in VS Code
I did assign a key to the whole RowTable but didn't fix the issue.

Force re-render the react component in the jquery single page application or in static html site?

I have created one spa using JQuery. SPA is done via writing a custom router where we add visible classname to a page div to make that page visible and we remove the same classname from all the other pages using jquery like this,
$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");
Now I am migrating this site to use react components here and there through out the website. I have one component on one of the page that shows product data based on the id in the URL but the problem is that it doesn't rerender even if I change the URL. It is not able to detect the change as state or props are not changing.
is there a way to force rerender this component from my other JS code?

The solution was pretty straight forward but it is not mentioned anywhere.
The official guide says to use this below code at the end of the file so that when our js file will be loaded by the browser and run then it will render our react code but the thing is we can call this method from anywhere to force rerender our component/ replace our component with the new instance.
To force rerender it, calling below method that adds the react code to the div worked.
ReactDOM.render(<ProductDetails />, document.getElementById("product-details"));
Using this we can even pass the new props also if we want to.

External javascript files stop working after first page change reactjs

I've imported javascript files in public-> index.html, but whenever I change the page it stops working.
And it comes back as soon as i reload the same page.
Can anyone help me out with this how should I call external javascript file?

In light of your comment
I've converted html theme to react. In index.html I've imported
carousel js [...] When I load the website for first time it works
properly but when go to some other page and then come back to the home
page carousel stops working.
It sounds like you use an older, non-react script. DON'T DO THIS!
You are not allowed to change the DOM if you use React. Every change must go through react to work.
The reason it won't work on the second viewing is that you don't look at the same HTML elements, but freshly rendered ones.
The first render, where you had the carousel working was completely deleted when you viewed another page. And then, when you came back, React rendered the first page again. But you never re-started the carousel, so of course it doesn't work.
The solution is to use a carousel library built for React. I'm sure there are hundreds of them.

Once a script file is loaded, it stays available, so it sounds like you have some kind of logic error in your code.

Vue deleting DOM node in created live-cycle hook to initialize a component

I'm currently trying to understand why this example is not working as expected. So what I'm trying to achieve is to initialize my ContentView with the server side rendered HTML present in the DOM. Therefore I intend to check if init__main-content exists to then initialize the component with the innerHTML. Afterwards I simply tried to delete the initial node but this is not working and I end up with the content shown twice.
There must be some vue "magic" I'm not aware of, can please someone explain this behavior?

I guess there is problem in your code as you are using created hook insted you can use mounted hook.
so after mounting vue does finish all its magic to dom and now your changes can be persisted in to the dom.
if you use created then vue may be using that inner html as template and rewrite it it to dom thinking that previous html is not matching with current html when instance is created. as you already removing that element. so it will try to make it correct and add previous html again to maintain virtual-dom and real-dom changes.
if you use mounted hook your application is working fine try it.

React Components not working

I have a page created using React. Up until now everything was working great. But now the page loads and as soon as the page is loaded all components freeze and I cannot interact with them. It is important to note that the browser is working fine and it is not the browser that freezes.
If it helps, I am using webpack to host the page.
Here is a sample.
Basically I have a component that is like a parent to all other components. The parent component gets data from a server and passes along to other components.
The parent also passes along methods that I can use to call from children component and interact with server again and this is basically the pattern through all the project. I have sadly no idea why it started freezing even though everything including styles loads perfectly. I just cannot interact with it and press buttons and such

One thing that can freeze things is if in the onClicks you do:
<button onClick={this.setSector('legal')}>
rather than:
<button onClick={() => this.setSector('legal')}>