fixing issue with announcer and hot module reloading (#1585)

Author: alexreardon

docs/support/media.md

@@ -30,6 +30,7 @@ This page contains a list of articles, blogs and newsletters that `react-beautif
 
 ## Newsletters
 
+- Tiny letter [November 04, 2019](https://tinyletter.com/cassidoo/letters/the-world-is-changed-by-your-example-not-by-your-opinion-paulo-coelho)
 - Ponyfoo [issue 78](https://ponyfoo.com/weekly/78/javascript-and-css-engines-pwa-drag-and-drop-web-components-and-http-2)
 - PonyFoo [issue 99](https://ponyfoo.com/weekly/99/react-across-the-universe-typography-load-balancing-and-javascript-frameworks)
 - PonyFoo [issue 141](https://ponyfoo.com/weekly/141/http-3-bgp-leaks-react-as-native-dom-typescript-tensorflow-and-all-things-performance)

src/view/use-announcer/use-announcer.js

@@ -1,7 +1,6 @@
 // @flow
 import { useRef, useEffect } from 'react';
 import { useMemo, useCallback } from 'use-memo-one';
-import { invariant } from '../../invariant';
 import type { Announce, ContextId } from '../../types';
 import { warning } from '../../dev-warning';
 import getBodyElement from '../get-body-element';
@@ -14,42 +13,48 @@ export default function useAnnouncer(contextId: ContextId): Announce {
   const id: string = useMemo(() => getId(contextId), [contextId]);
   const ref = useRef<?HTMLElement>(null);
 
-  useEffect(() => {
-    invariant(!ref.current, 'Announcement node already mounted');
-
-    const el: HTMLElement = document.createElement('div');
-    ref.current = el;
-
-    // identifier
-    el.id = id;
-
-    // Aria live region
-
-    // will force itself to be read
-    el.setAttribute('aria-live', 'assertive');
-    el.setAttribute('role', 'log');
-    // must read the whole thing every time
-    el.setAttribute('aria-atomic', 'true');
-
-    // hide the element visually
-    Object.assign(el.style, visuallyHidden);
-
-    // Add to body
-    getBodyElement().appendChild(el);
-
-    return () => {
-      // unmounting after a timeout to let any annoucements
-      // during a mount be published
-      setTimeout(function remove() {
-        const toBeRemoved: ?HTMLElement = ref.current;
-        invariant(toBeRemoved, 'Cannot unmount announcement node');
-
-        // Remove from body
-        getBodyElement().removeChild(toBeRemoved);
-        ref.current = null;
-      });
-    };
-  }, [id]);
+  useEffect(
+    function setup() {
+      const el: HTMLElement = document.createElement('div');
+      // storing reference for usage in announce
+      ref.current = el;
+
+      // identifier
+      el.id = id;
+
+      // Aria live region
+
+      // will force itself to be read
+      el.setAttribute('aria-live', 'assertive');
+      el.setAttribute('role', 'log');
+      // must read the whole thing every time
+      el.setAttribute('aria-atomic', 'true');
+
+      // hide the element visually
+      Object.assign(el.style, visuallyHidden);
+
+      // Add to body
+      getBodyElement().appendChild(el);
+
+      return function cleanup() {
+        // Not clearing the ref as it might be used by announce before the timeout expires
+
+        // unmounting after a timeout to let any announcements
+        // during a mount be published
+        setTimeout(function remove() {
+          // not clearing the ref as it might have been set by a new effect
+          getBodyElement().removeChild(el);
+
+          // if el was the current ref - clear it so that
+          // we can get a warning if announce is called
+          if (el === ref.current) {
+            ref.current = null;
+          }
+        });
+      };
+    },
+    [id],
+  );
 
   const announce: Announce = useCallback((message: string): void => {
     const el: ?HTMLElement = ref.current;