diff --git a/public/app/core/navigation/GrafanaRoute.tsx b/public/app/core/navigation/GrafanaRoute.tsx
index 9cfa4f6e224..1bfe2765013 100644
--- a/public/app/core/navigation/GrafanaRoute.tsx
+++ b/public/app/core/navigation/GrafanaRoute.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, useLayoutEffect } from 'react';
 // @ts-ignore
 import Drop from 'tether-drop';
 
@@ -18,9 +18,11 @@ export function GrafanaRoute(props: Props) {
 
   chrome.setMatchedRoute(props.route);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     keybindings.clearAndInitGlobalBindings();
+  }, [keybindings]);
 
+  useEffect(() => {
     updateBodyClassNames(props.route);
     cleanupDOM();
     navigationLogger('GrafanaRoute', false, 'Mounted', props.match);