From 3563b0c1fe800ce0de74cdc6199c4afa2bc6e048 Mon Sep 17 00:00:00 2001 From: R Pritto Ruban Date: Fri, 12 Jul 2024 02:03:06 +0530 Subject: [PATCH] add a solution using 'useState' It avoids re-creating the video player instance on every render. --- src/content/reference/react/useRef.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md index fcecae7149b..514f7b6a901 100644 --- a/src/content/reference/react/useRef.md +++ b/src/content/reference/react/useRef.md @@ -534,6 +534,18 @@ function Video() { Here, the `playerRef` itself is nullable. However, you should be able to convince your type checker that there is no case in which `getPlayer()` returns `null`. Then use `getPlayer()` in your event handlers. +A More Robust Solution Using useState: +If you want a more robust solution that avoids all kinds of acrobatics like lying to a type checker or performing checks inside the render body, you can leverage useState: + +```js +function Video() { + const [playerRef] = useState(() => ({ current: new VideoPlayer() })); + + // playerRef is now a stable object containing the video player instance +} +``` + + ---