0

So I'm coding in React, and as far as I understand, every time a user make a local update in a realtime distributed system(such as Firebase, which I'm using) there needs to be a call to update first Firebase, and then if successful, a new object (the old object + the new data we pushed locally) can be sent back from Firebase to the React's Stores and then app will use that object to re-render starting with the top level component of the app.

Yet it feels like my understanding is off because it seems like a complete re-rendering be slow. I think of ajax situations where only the piece that needs to be updated is updated so have smooth updates.

So do I return a whole object and have it re-rendered entirely or just use a success event to go ahead and add that piece of data to the store it belongs to?(which I'm assuming would only cause a re-rending of only the component that is effected by the change?)

Nick Pineda
  • 6,354
  • 11
  • 46
  • 66

1 Answers1

1

In Reactjs, the way to handle this is return the whole object and pass it in to the app the same as for the first response. However, each of your components should implement shouldComponentUpdate to determine whether the new data requires that it update itself. If there's no need, it returns false and that part of the UI does not re-render.

This keeps the app's code simpler since it always does the same thing and you don't have to worry about piecemeal data responses. However the implementations of shouldComponentUpdate can become complex.

Ed Ballot
  • 3,405
  • 1
  • 17
  • 24