Current prop

src/routes/components/resourceTypeahead/resourceInput.tsx

@@ -50,7 +50,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
 
   // apply focus to the text input
   const focusTextInput = () => {
-    textInputGroupRef.current.querySelector('input').focus();
+    textInputGroupRef?.current.querySelector('input').focus();
   };
 
   const getInputGroup = () => {
@@ -149,9 +149,9 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
   // Close menu when a click occurs outside the menu or text input group
   const handleOnPopperClick = event => {
     if (
-      menuRef.current &&
-      !menuRef.current.contains(event.target) &&
-      !textInputGroupRef.current.contains(event.target)
+      menuRef?.current &&
+      !menuRef?.current.contains(event.target) &&
+      !textInputGroupRef?.current.contains(event.target)
     ) {
       setIsOpen(false);
     }
@@ -171,7 +171,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
       case 'ArrowUp':
       case 'ArrowDown':
         // Allow focus on the menu and navigate using the arrow keys
-        if (menuRef.current) {
+        if (menuRef?.current) {
           const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
           (firstElement as any)?.focus();
         }
@@ -186,7 +186,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
     <Popper
       trigger={getInputGroup()}
       popper={getMenu()}
-      appendTo={() => textInputGroupRef.current}
+      appendTo={() => textInputGroupRef?.current}
       isVisible={isOpen}
       onDocumentClick={handleOnPopperClick}
     />

src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.tsx

@@ -279,7 +279,7 @@ const OptimizationsBreakdownChart: React.FC<OptimizationsBreakdownChartProps> =
   };
 
   const handleOnResize = () => {
-    const { clientWidth = 0 } = containerRef.current || {};
+    const { clientWidth = 0 } = containerRef?.current || {};
 
     if (clientWidth !== width) {
       setWidth(clientWidth);
@@ -400,7 +400,7 @@ const OptimizationsBreakdownChart: React.FC<OptimizationsBreakdownChartProps> =
   }, [limitData, requestData, usageData]);
 
   useEffect(() => {
-    const unobserve = getResizeObserver(containerRef.current, handleOnResize);
+    const unobserve = getResizeObserver(containerRef?.current, handleOnResize);
     return () => {
       if (unobserve) {
         unobserve();

src/utils/chrome.tsx

@@ -32,7 +32,7 @@ export const withChrome = Component => {
 
     useLayoutEffect(() => {
       isOrgAdmin(auth).then(val => {
-        if (isMounted.current) {
+        if (isMounted?.current) {
           setOrgAdmin(val);
           setInitialized(true);
         }

src/utils/hooks.ts

@@ -26,7 +26,7 @@ export const useStateCallback = <T>(initialState: T): [T, (state: T, cb?: (_stat
   useEffect(() => {
     // cb.current is `undefined` on initial render,
     // so we only invoke callback on state *updates*
-    if (cbRef.current) {
+    if (cbRef?.current) {
       cbRef.current(state);
       cbRef.current = undefined; // reset callback after execution
     }