You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constdeckRef=useRef<Reveal.Api|null>(null);// reference to deck reveal instanceuseEffect(()=>{// Prevents double initialization in strict modeif(deckRef.current)return;deckRef.current=newReveal(deckDivRef.current!,{transition: "slide",// other config options});deckRef.current.initialize().then(()=>{// good place for event handlers and plugin setups});return()=>{try{if(deckRef.current){deckRef.current.destroy();deckRef.current=null;}}catch(e){console.warn("Reveal.js destroy call failed.");}};},[]);
Writing in an abort variable seems to fix the issue along with setting the ref only after initialization.
useEffect(()=>{letabortInitialize=false;letdeck=newReveal(deckDivRef.current!,{transition: "slide",// other config options});deck.initialize().then(()=>{if(abortInitialize){deck.destroy();return;}// good place for event handlers and plugin setupsdeckRef.current=deck;});return()=>{try{abortInitialize=true;if(deckRef?.current?.isReady()){deckRef.current.destroy();deckRef.current=null;}}catch(e){console.warn('Reveal.js destroy call failed.');}};},[]);
I have yet to test your suggestion but I noticed that you try to abort the initialization inside the then block which happens after initialization. If the destroy function does not fully revert the changes to the DOM that the initialization function makes, then there will be problems that will result. The block should make sure that any deck is only ever initialized once. It would be convenient if Reveal.js only allows a deck to be initialized once perhaps similar to how plugins do it. Currently, setting the ref to null in the return acts similar to a flag that prevents re-initialization.
The docs suggestion on how to use Reveal with react seem to have a bug.
From: https://revealjs.com/react/
This expressly violates the pitfall described in the React documentation:
https://react.dev/learn/synchronizing-with-effects#dont-use-refs-to-prevent-effects-from-firing
This causes reveal to not unmount properly, the observable bug is that the keyboard bindings from a previous instance remain.
React docs suggest that a cancelation be used instead:
https://react.dev/learn/synchronizing-with-effects#fetching-data
Writing in an abort variable seems to fix the issue along with setting the ref only after initialization.
Related issue:
#3593
The text was updated successfully, but these errors were encountered: