Comment by Sebastian on "React component update help needed"

CommentReact component update help needed

Sebastian

Sep 7, 2019

It depends on the actual code. Do you use arrow functions in the render method? This can cause unnecessary render on unrelated child components.

React components as functions result in no real advantage. I think even the react team stated once function components are slower than classes. But I think that was fixed in some 16.x releases.

Implementing shouldComponentUpdate should really only be done when necessary which was never in all my case until now.

Also consider the following: render is called very often at least to say. But if the virtual Dom didn't change, the actual Dom won't either. So at least of the render performance perspective this isn't an issue. Although complex calculations in render methods can cause performance issues and should be avoided.

Giulia Lake

Web Developer

Sep 8, 2019

Hi Sebastian, I moved some calculations outside of the child components and just passed the results as props. I did not know that arrow functions have slower performance, is that happening even if you have a compiler like webpacker? I moved them out of the render, just in case. Thanks for your help!!

Yes, it doesn't matter if webpack is used. The algorithm behind react is comparing the differences in the virtual Dom and the real Dom. On Event handler like onChange the memory address of the function for the handler is stored. But if you use an arrow function (in general but event handler are most common) to bind the function to handler, which is sadly often proposed in tutorials, every render call a new function pointer is created thus react render unnecessary even if the "the real" data haven't changed.

Normally this is only measurable but in high frame output like you do this can be an issue.

This only is a problem with arrow functions within the render method.

If you like I can provide you an example what I mean.

Search Hashnode