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?