React newbie here... I started building an app using React on top of Rails. The structure is a main component (App.js) and a bunch of components that are child to this app including a video player. The app component contains all my state logic and the rest are all functional components. Now i realized that the default behavior, is that all the child component of the app re-render every time there is a state change, even tho they are not related to that piece of state. Since my player is updating the state very frequently when the video is running, the whole app and child components re-render about 1800 times in less than a minute. Some child components are pretty complex and I do not want them to re-render when the video is playing. I do not know what to do to avoid this. Should I upgrade all the child components to class components and try to implement a shouldComponentUpdate in each of them? Should I try to use hooks to do the same? Are there other ways that I can avoid this re-rendering each time, looks like it is slowing down my website...
Sebastian
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.