fixing issue with announcer and hot module reloading

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

@@ -14,42 +14,46 @@ 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');
+  useEffect(
+    function setup() {
+      invariant(!ref.current, 'Announcement node already mounted');
 
-    const el: HTMLElement = document.createElement('div');
-    ref.current = el;
+      const el: HTMLElement = document.createElement('div');
+      ref.current = el;
 
-    // identifier
-    el.id = id;
+      // identifier
+      el.id = id;
 
-    // Aria live region
+      // 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');
+      // 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);
+      // hide the element visually
+      Object.assign(el.style, visuallyHidden);
 
-    // Add to body
-    getBodyElement().appendChild(el);
+      // Add to body
+      getBodyElement().appendChild(el);
 
-    return () => {
-      // unmounting after a timeout to let any annoucements
-      // during a mount be published
-      setTimeout(function remove() {
+      return function cleanup() {
+        // grabbing and clearing ref incase effect is about to run again
         const toBeRemoved: ?HTMLElement = ref.current;
         invariant(toBeRemoved, 'Cannot unmount announcement node');
-
-        // Remove from body
-        getBodyElement().removeChild(toBeRemoved);
         ref.current = null;
-      });
-    };
-  }, [id]);
+
+        // unmounting after a timeout to let any annoucements
+        // during a mount be published
+        setTimeout(function remove() {
+          // Remove from body
+          getBodyElement().removeChild(toBeRemoved);
+        });
+      };
+    },
+    [id],
+  );
 
   const announce: Announce = useCallback((message: string): void => {
     const el: ?HTMLElement = ref.current;