CODEWITHSUNDEEP
reactjssocketswebsocketredux
Piyush
Piyush

Reputation: 3265

How to send data in real time in React-Redux without hanging my UI?

I am new in react-redux.

Scenario: I have a form with lot of text fields. When I enter a value into the field, following process takes place:

Field value => socket.emit data => socket.on => action called => redux state update => ui updates

There is no save button.

Problem is that, I feel this is a long cycle to update a single value in the redux state.

When UI re-renders (as redux updates), the form hangs for 2-3 seconds. So, I cannot enter value in other fields in this time interval.

Isn't there a short way or optimization to update my UI while sending real time data ?

Upvotes: 0

Views: 1402

Answers (2)

chautelly
chautelly

Reputation: 467

Agreed; I would take the optimistic approach here and store mutations locally in either component state or application state.

If your incoming props aren't nested deep you can also make use of React.PureComponent which does a shallow comparison of nextProps vs. currentProps to determine whether re-rendering is necessary.

Upvotes: 0

palsrealm
palsrealm

Reputation: 5243

Without looking at your code it would be difficult to suggest exact changes. But even then, here goes.

  1. Use state to store immediate changes : All the text fields should be bound to a state field (json object) which would be updated by the onChange handlers on of each of the textfields. This state field should receive the initial form data from the props passed to the form.
  2. Compare state field with initial data to decide whether changes have occurred: Compare the state field with the initial data passed as props to decide whether any changes have occurred.
  3. Delay the call to update the redux state: Use a function like lo-dash's debounce to update the redux state at set intervals or on page navigation events, when the state field and the props initial state differ.

This would save your UI from unnecessary re-renders and hopefully resolve the issue with the UI freezing on you. Hope this helps!

Upvotes: 1

Related Questions