improve unreleased, adjust keypress function order

Author: emma-boardman

UNRELEASED.md

@@ -16,6 +16,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Add `status` prop to `IndexTable.Row` to allow table rows to specify background colors([#4146](https://github.com/Shopify/polaris-react/pull/4146))
 - Added `useIsomorphicLayout` ([#4173](https://github.com/Shopify/polaris-react/pull/4173))
 - Prevent `KeypressListener` attaching/detaching on every render ([#4173](https://github.com/Shopify/polaris-react/pull/4173))
+- Added `useIsomorphicLayoutEffect` hook ([#4173](https://github.com/Shopify/polaris-react/pull/4173))
+- Prevented `KeypressListener` attaching/detaching on every render ([#4173](https://github.com/Shopify/polaris-react/pull/4173))
 
 ### Bug fixes
 

src/components/KeypressListener/KeypressListener.tsx

@@ -18,17 +18,17 @@ export function KeypressListener({
 }: KeypressListenerProps) {
   const tracked = useRef({handler, keyCode});
 
+  useIsomorphicLayoutEffect(() => {
+    tracked.current = {handler, keyCode};
+  }, [handler, keyCode]);
+
   const handleKeyEvent = useCallback((event: KeyboardEvent) => {
     const {handler, keyCode} = tracked.current;
     if (event.keyCode === keyCode) {
       handler(event);
     }
   }, []);
 
-  useIsomorphicLayoutEffect(() => {
-    tracked.current = {handler, keyCode};
-  }, [handler, keyCode]);
-
   useEffect(() => {
     document.addEventListener(keyEvent, handleKeyEvent);
     return () => {