Develop Reference

Can my React component listen to changes in the server and update itself?

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;
}

Refresh Page upon React Component Update

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.

Reloading items from firebase every change in route

I wrote a service in angular that fetches items from firebase using snapshotChanges and return them. than in my component i subscribe to the data and store theme in an array. than i show the data in cards using ngFor.
Everytime i switch pages (without reloading) the data is being reloaded in a visible way, it hurts the UX and doesn't look good. i tried using take(1) but it didn't work. Sometimes it shows the same data multiple times.
Why is this happening and what should i do to fix it ?
Tank you :)

You could try to load the data in a wrapper component and pass it to the children. This happens because a component (and all of the loaded data) is destroyed when the component is left and the route is changed.

Using react router without loosing "setState" state?

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.

React TabView component - keep Tab component state while changing tab

I'm trying to build a ReactJS component that i will release as open source that manages tabs and allows to load other components into the tabs by either create a new instance of the tab component each time you click it or reusing the same component instance until the TabView is destroyed.
I managed to create the first part of the component, and it works, but unfortunately the tabs seems always to attempt to create a new Loader component (which is responsible for either reuse an instance or create a new one.).
In the demo the companies and home count (wich can be increased by clicking) should remain the same even after changing tab and coming back. I can't save the count to the parent component because the tab will contain other complex controls and I can't keep passing the state to the parent.
How can I solve my problem? At the moment i'm saving the instance into a state property and reuse it, but it seems to not work. :/
Thanks for any futher help!
Source code: http://pastebin.com/zaqXwi4V
Online demo: http://matt93.altervista.org/demo