CODEWITHSUNDEEP
javascriptreactjswebsocketstompspring-websocket
Jordan Mackie
Jordan Mackie

Reputation: 2406

React avoid re-render

For a project, we want to have notifications visible throughout all views in the app.

The sidebar menu allows users to move between views, and is on the same level as the notification component and the websocket component react-stomp. The router is used to change the view on the next level depending on the selected menu item.

Our problem is that if a new message arrives, we need to pass it down to the view as props, and of course this triggers a re-render of the entire component.

Is there a way to avoid this rerender?

We would like to avoid redux, though we are aware it is a possible solution.

Upvotes: 0

Views: 686

Answers (3)

Matthew Barbara
Matthew Barbara

Reputation: 3962

By default, if props changes react will trigger re-render. If you want to avoid rendering a componenet you can use the hook shouldComponentUpdate(nextProps, nextState)

Quoting React's documentation:

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

For further reading visit their docs

Upvotes: 3

Stefano Bettinelli
Stefano Bettinelli

Reputation: 11

You could use REACT CONTEXT API if you want to avoid using a state manager like Redux or MobX

Upvotes: 0

venu
venu

Reputation: 147

Have you tried experimenting with react lifecycle event hooks ?

Upvotes: 1

Related Questions