React component update help needed

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...