# Video is lost when trying to render component conditionally!?

**URL:** <https://devforum.zoom.us/t/video-is-lost-when-trying-to-render-component-conditionally/64455>\
**Category:** Web\
**Created:** [February 17, 2022, 10:11am UTC](https://devforum.zoom.us/t/video-is-lost-when-trying-to-render-component-conditionally/64455 "2022-02-17T10:11:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jetonthaci.88](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jetonthaci.88/32/33602_2.png) [@jetonthaci.88](https://devforum.zoom.us/u/jetonthaci.88)\
**Post date:** [February 17, 2022, 10:11am UTC](https://devforum.zoom.us/t/video-is-lost-when-trying-to-render-component-conditionally/64455/1 "2022-02-17T10:11:16Z")

</div>

**Description**  
In a ReactJS app, I have a component that renders the host video only:

```auto
const VideoSingle = ({ mediaStream, user, width, height }) => {
  const videoRef = useRef()

  const renderVideo = useCallback(
    async (canvas, stream, u) => {
      try {
        if (!u.bVideoOn) {
          stream.stopRenderVideo(canvas, u.userId)
          return
        }

        await stream.renderVideo(
          canvas,
          u.userId,
          width,
          height,
          0,
          0,
          VideoQuality.Video_720P
        )
      } catch (error) {
        console.log(error)
      }
    },
    [height, width]
  )

  useEffect(() => {
    if (!mediaStream || !videoRef.current || !user) return

    renderVideo(videoRef.current, mediaStream, user)
  }, [videoRef, mediaStream, user])

  return (
    <canvas
        width={width}
        height={height}
        className='video-canvas'
        ref={videoRef}
        style={{ width, height }}
    />
  )
}

```

I’m rendering this component conditionally like this:

```auto
{slide === 'facilitator' && (
    <VideoSingle
               mediaStream={mediaStream}
              user={host}
              height={480}
              width={640}
            />
 )}

```

The video is visible on the first render, but after I hide and then show the component again, the video is lost. I checked all the parameters are same as in the first render and the code is passing the `try` block but the video is missing.

**Browser Console Error**  
No errors in the console.

**Which Web Video SDK version?**  
**1.1.7**

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [February 18, 2022, 2:20am UTC](https://devforum.zoom.us/t/video-is-lost-when-trying-to-render-component-conditionally/64455/2 "2022-02-18T02:20:36Z")

</div>

Hey @jetonthaci.88

Thanks for your feedback.

Try to keep the canvas element, use CSS style to hide the element when it doesn’t need to be shown. Frequently creating and destroying canvas will lead to ‘webgl context lost’, which is the cause of black video.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [March 20, 2022, 12:21pm UTC](https://devforum.zoom.us/t/video-is-lost-when-trying-to-render-component-conditionally/64455/3 "2022-03-20T12:21:32Z")

</div>

Closed on March 20, 2022, 12:21pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.