4

Why does React's functionality of "only updating what's necessary" matter to performance?
From https://facebook.github.io/react/docs/rendering-elements.html#react-only-updates-whats-necessary

React only updating what has changed.

Does React's functionality of only re-rendering components which have changed affect browser rendering speed/performance?

React claims that only updating the UI components that need to be updated, rather than the whole page, increases performance. From https://facebook.github.io/react/docs/optimizing-performance.html

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance.

In an update/draw loop of an application, doesn't the entire screen have to be redrawn anyway? How does the browser benefit from only rendering (redrawing?) one element out of many if it has to redraw everything every frame? Browsers have a framerate (MDN Frame Rate), so how does framerate reconcile with "only updating what's necessary"?

I don't see how updating only one element in the browser affects the browser's draw. React's javascript object representation may be fast before actually pushing the render, but if React is only rendering diffs to the actual DOM, how does that help performance?

A lower-level question may be: how does the browser save on computation when not repainting/reflowing the layout? Doesn't it have to draw every frame?

I've referred to these other questions which are topical but don't specifically address my question:

George Pantazes
  • 1,039
  • 3
  • 12
  • 26

1 Answers1

3

You quoted the answer here yourself:

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance.

React doesn't concern itself it with optimizing low-level issues like how the page is redrawn (which is likely handled by the operating system itself), but how to efficiently use the DOM. It is known that the more DOM operations that are performed, the worse overall performance will be. React just works to minimize those DOM operations.

blockhead
  • 9,655
  • 3
  • 43
  • 69
  • 2
    I am interested in a low level explanation if you are ok with giving one. It makes sense from a high level standpoint, but I am wondering, if ultimately the browser is re-drawing a page every frame, isn't it re-rendering the DOM anyway? In other words, if I have 10 pixels, I still have to redraw them 60fps (lets say), regardless of whether or not they got changed from blue to red? Is there some step between DOM to Screen that I am missing? – moonboy Jun 27 '17 at 15:16
  • 1
    Yes. The DOM manipulations themselves could be slow. Less/more efficient DOM manipulations == faster. The screen redrawing is orthogonal to what user land library is at work. – blockhead Jun 27 '17 at 15:48
  • Thank you @blockhead, I think you are right and framing this question in the context of React means yours is the best answer (even though you didn't get into asynchronous batching of DOM operations, at a high level your answer is correct). I think at this point my remaining questions don't have to do with React. As a high level framework, React minimizing DOM operations is the answer at this level of abstraction. About how the browser works at a lower level, I'll explore that separately. – George Pantazes Jun 28 '17 at 15:31