0

I have three components in my app which are <Video />, <VideoPreview /> , <VideoWrapper />,
here VideoWrapper component conditionally renders other two components based on a state isDragging, whenever someone starts dragging it renders,

the code is like isDragging ? <VideoPreview /> : <Video />

Here in this question, I saw they prefer using the current (JSX short circuit rendering) approach. But in my case, the <Video /> component renders some other components, and it makes an HTTP request on every render to load the video from CDN.

So I'm confused about which one should be better, the current approach or passing the isDragging state to the video component and toggling the visibility using CSS when isDragging=true. Can anyone explain which one should be better?

Moni
  • 47
  • 9
  • I think that CSS would be much faster then rerendering. But at the end of the day you would probably need to profile both approaches to find out which one is faster in your case. – Computeshorts Oct 28 '21 at 10:27

1 Answers1

0

You definitely want to drag the preview, and not the component itself. Depending on what you use for drag 'n drop, the dragged component could rerender multiple times during the full cycle.

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40