Avoid live video component re-rendering

How To
#1

Hello! I’m working on an app that has a live video feed in the background, during an active game.

Problem is, every time that game’s reducer updates, the game component obviously gets re-rendered, therefore, the Video component within (from expo-av), also gets re-rendered, causing the stream to be cut-off, and start loading again, as on a normal mount.

How am I supposed to keep that Video component from being re-rendered so that the live video feed does not get cut off with every render.

Please advise, as I’m kind of out of solutions here.

#2

This sounds like it might just be a React question and you want to prevent the re-render of a specific component from happening. You could React.memo for this to specify when you actually want to re-render (https://reactjs.org/docs/react-api.html#reactmemo - function components, by default, always re-render). If you’re using a class component, you could alternatively use shouldComponentUpdate.

#3

Yeah, I know it’s react related, though it was worth the shot asking in here as well.
I’ve switched to hooks as soon as they were released since I’m quite fond of the cleaner code.

I was not aware of the fact that I can use a component inside of useMemo. Will give it a try and come back.

#4

Not sure if this is possible in your case, but could you make the background of your “game” component transparent and layer it on top of the “video” component, instead of having them both in the same component that keeps getting re-rendered?

#5

@wodin exactly what I’ve decided to go for, but not now, a quick and dirty solution, I simply ported back to a class component and edited shouldComponentUpdate to only re-render on game start / end.

Basically I’ll be adding the Video component in the root component, “fullscreen”, controlled by a reducer which only gets updated when game either starts, ends or it’s feed changes (which should never happen in theory, but, in case it does).

It’s quite weird that when re-rendering, the component gets re-initialised … I’d expect React to keep the video going as is, if it’s dependencies have not changed.

Regards!

#6

Btw, React.memo and useMemo are different! There’s a section about the two in this article: https://linguinecode.com/post/prevent-re-renders-react-functional-components-react-memo

1 Like