Is it possible to reload/remount react components? I have simple app made in spring boot and react. I've implemented simple notifications via web-sockets (stomp). In react i'm using SockJSClient component like this:
<SockJsClient url='http://localhost:8080/voting-socket' topics={['/queue/notification', '/user/queue/notification']}
onMessage={this.onMessageReceived} onConnect={this.onConnect} debug headers={{Authorization: "Bearer " + localStorage.getItem(ACCESS_TOKEN)}}/>
the problem occurs when i get to my app as a guest (then socket connects to spring boot app without authentication) and login. Web-socket connection stays the same (im not authenticated). It only works when i hit refresh button in the browser (whole dom and web-sockets get rebuild then). So my questions is can i somehow manually rebuild/reconnect sockjs component?
In order to trigger child component update, parent component state should be updated. In order to trigger component remount, key prop can be updated, e.g.:
<SockJsClient key={this.state.auth} ... />
Related
I have made a react app which gathers cusotmer information through a form and renders it in another page. The purpose is to have the website open on a tablet with the customer form and then show the result on a computer. So when the form is submited on the tablet, I want the result to automatically update on the computer on the result page. Is this possible to make happen between two different devices?
I am posting the form data to strapi in the form component and then fetching the result in the result component. I have made a refresh button which refreshes the page and updates the result. I have also tried with a setInterval every 10 sec to fetch new data, but it seems a bit unnessesary to refresh every 10 sec. I want it to rerender only when a new result is submited, not every 10 sec or so.
To make the result page automatically update on the computer when the form is submitted on the tablet, you need to use a technique called real-time communication. Real-time communication allows two or more devices to exchange data instantly without refreshing or polling.
One way to implement real-time communication in your react app is to use web sockets. Web sockets are a protocol that enables bidirectional and persistent communication between a client and a server. You can use a library like socket.io to simplify the process of creating and managing web sockets.
Here is an overview of how you can use web sockets with socket.io in your react app:
Install socket.io-client as a dependency in your react app and import it in your components.
Create a socket instance by calling io() with the URL of your strapi server as an argument.
In your form component, after posting the form data to strapi, emit an event with socket.emit() and pass the data as an argument.
In your result component, listen for the event with socket.on() and update the state with the data received as an argument.
Use useEffect() hook to clean up the socket connection when the component unmounts.
Check the documentation for more details.
Let's say I have an application with a component named "Protected"
**<Protected />**
This component should be "protected", and only admin users should have access to them (because it contains secret in formations)
But there are 2 problems.
I can't store it on the react application using a protected route on react router. (because my application can be easily reversed)
I can't fetch only the data from the server, I need to fetch the whole component.
I searched about React server side rendering but I didn't fully understand if it's possible.
Can I do this with React server side rendering? Are there more efficient ways?
Thanks !
I have the following case: I have a web page with antd tabs and I need to refresh each of these tabs separately in a service worker push event. When I use client.navigate() or client.openWindow() in the event listener the whole page is refreshed. I have found a solution with React Router to pass parameters in the url, but I don't like it because I don't want the url to change and also I need to pass further props to the page that are shared in both tabs. Also how can I manage to call a Route render or a component with props from the service worker file. I use React, Typescript and antd.
The structure is the following:
Main.tsx - page with Router Routes
service-worker.ts - service worker methods and functions
SomePage.tsx - page I need to refresh
Other pages components etc.
Solved...
After a little exploring I have used client.postMessage in the service worker and on the resulting page I used navigator.serviceWorker.addEventListener('message', (ev)) where I could get the data from the service worker and use it in my component for what I needed and more.
Im working on a chat app that uses Apollo client and React
I made my Messages Window component run a cache update in the componentDidMount.
My goal is to update the unread count when the messages are opened. This updates when getting the message but the frontend UI needs the optimistic ui update.
I refresh the page:
First click causes no response...
Every click after that seems to update the previous.
Any ideas?
Here's my onload for the component
Did have setup redux in your app then call action at when user open message and you will get new data at componentwillreceve method via reducer then you can do what ever you want
I am building an isomorphic app with React that must support users without JS.
I am new in this technology and I have a basic doubt:
The server can store the components states to emulate what React does in the client-side?
I imagine this flow when the user dont have JS:
The user click a button and send a request to the server.
The server recovers the state of the app and makes changes in it.
The components listen this changes and are rendered again.
Is it correct?
Assuming that you're using react-router :
The server aims to initialize your state, to provide it the default minimum values necessary to make your application work while getting an url.
For example, if you have an application in which you want to display a user list, let say on /users URL, when you'll send your first request, the server will store the users in the react state.
After that first load, you'll be working on the client side using react-router, and making XHR request.
However, if you refresh your page, the process will start again : first load initializing the state and then client side navigation.
EDIT : Explanations =>
When you want to use react on the server, this means that you use a Nodejs server. The fact is that react-dom provides a method called renderToString that transform a react jsx component into standard HTML.
This aims to load the first call faster
Why ?
When you load a "big" JS application on the client, you have some delay time, the time your browser needs to download your JS bundle.
Server side rendering aims to avoid that behaviour, or at least, to gives the feeling that the app starts faster.
In no case you can only use react, even if you use your server side renders. Why ? . Because your events on buttons, or asynchronous load on client, or keypress are in JS language.