I have few React Components in my app which sends ajax calls. All works fine except one thing. I want to refresh the page when a particular component gets updated. So I used location.reload() in componentWillReceiveProps method. Though it works, unfortunately the whole page reloads whenever a component gets an update instead of just the component that has location.reload() code.
Why this is happening and how can I prevent / solve this?
Update and clarification: Thanks for the answers. I'm very much aware that state change re-renders the component. This is not a standalone React app and refreshing page is a requirement.
This react app is part of WP settings page which is tabbed one. One tab of settings is a react app. Upon enabling a button, corresponding tab should be visible and that needs page refresh (as it is not react, but WP backend code).
My question is If I add location.reload() in componentWillReceiveProps method of a single component, then why other components also refreshes page even though they don't have such code. Is componentWillReceiveProps a static method that is shared between all components? Why does other component state changes picks up location.reload() and refresh pages?
use a state variable and whenever you get any changes then setState which will only update your component instead of updating the whole page.
for more reference see this:https://reactjs.org/docs/react-component.html
wrap location.reload() with some condition (eg. if block) and choose that condition according to your component state change, don't write location.reload() directly because it will run for any state change that passed to that component.
Related
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.
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.
I have a React component that renders a list of items. I have a different component which allows user to add a new item. This new item is created by making an async call to the server. Can the component that renders the list listen to changes in the server and update itself.
The new item is added through a modal hence when the modal is closed, an action needs to be triggered to update the component that renders the list of items. Right now I am having to refresh the browser to reflect the changes in the UI.
If I close my modal, there is no way I am triggering a change to the component that renders the list of items. I thought about adding the result of the async call which is a list item to the state using redux as a way to cause a re-render. However, the client I am interfacing with does not give back all the properties that the items requires (as a part of the Typescript interface). Hence this method won't work. An alternate way to force a re-render to the component that displays the list. But again, can't really think of a way that would be work and how would I trigger the componentDidUpdate hook.
if (the server supports webSockets) {
use webSockets;
} else {
use socket.io;
}
I have a React app that takes the user through various steps. I want to have the ability to use the browser's "back" button to go back to a previous step. Now I'm thinking of using react-router to do this.
Currently, I am simply reacting to events and calling setState on my top-level component.
My question: Does all state have to be reflected in the URL, or saved into local storage? Or can I keep the component's state and just have react-router change some props on the top-level component? When I do that, do I risk loosing the component's state (e.g. because React doesn't identify the old and the new components)?
I want to have simple URLs like /step1, /step2... . These do not reflect everything that is going on in the app. Specifically, I don't need or want the ability to directly enter such an URL. There are also privacy concerns. I am happy with having the application's state in the main component's ephemeral state. In other words, my application's state is not a pure function of the route.
I want to mainly use react-router to make the back button act as a glorified undo / go to last step button, and only secondly to navigate to other components. Any idea or small snippet showing how to do that? Or is react-router not suited for this?
When React navigates from one component hierarchy to another (such as react-router links / history navigation) it only unmounts the components that do not exist in the new component hierarchy. State is only lost in unmounted components. If your state is properly stored at the top level which only goes through rerendering and not remounting, you should retain it.
I've a nasty problem to solve in my angular 2 webapp.
Let's say that I have this template in the app.component
<main-menu></main-menu>
<router-outlet></router-outlet>
Now the default component that gets injected inside the router-outlet tag is the login component and so far so good.
The problems come when I hit the login button.
The back-end api returns a user_role, and depending from it the main-menu must change (some links can be seen, others not etc.) and when the login is successful, it navigates to another third component.
The problem is that the constructor of the main-menu component and its hooks like ngAfterViewInit are not called a second time (since we're not navigating toward it but toward a third component) and this is a problem since I need the logic inside there to be reloaded.
I think I could solve this through child-routing (login injects menu, menu injects everything else), but is there a quicker way to solve it?
As I said it's possible to solve this problem with child routing (and it's what I did), but actually the simplest way was to do a location.reload() when the login button is pressed but visually it's not as good as having a nested route!