Search code examples
reactjsspring-bootspring-websocketstomp

Reload (remount) react child component

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?

Solution

  • 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} ... />