Clean up all lint warnings

packages/@react-aria/focus/src/useFocusable.tsx

@@ -12,7 +12,7 @@
 
 import {FocusableDOMProps, FocusableProps} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import React, {HTMLAttributes, MutableRefObject, ReactNode, RefObject, useContext, useEffect} from 'react';
+import React, {HTMLAttributes, MutableRefObject, ReactNode, RefObject, useContext, useEffect, useMemo} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
 
 interface FocusableOptions extends FocusableProps, FocusableDOMProps {
@@ -32,7 +32,8 @@ interface FocusableContextValue extends FocusableProviderProps {
 let FocusableContext = React.createContext<FocusableContextValue>(null);
 
 function useFocusableContext(ref: RefObject<HTMLElement>): FocusableContextValue {
-  let context = useContext(FocusableContext) || {};
+  let context = useContext(FocusableContext);
+  context = useMemo(() => context || {}, [context]);
 
   useEffect(() => {
     if (context && context.ref) {

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -100,7 +100,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
       document.removeEventListener('touchstart', onPointerDown, true);
       document.removeEventListener('touchend', onTouchEnd, true);
     };
-  }, [onInteractOutside, ref, state.ignoreEmulatedMouseEvents, state.isPointerDown, isDisabled]);
+  }, [onInteractOutside, ref, state, isDisabled]);
 }
 
 function isValidEvent(event, ref) {

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -141,7 +141,7 @@ export function useNumberField(props: NumberFieldProps, state: NumberFieldState,
         handleInputScrollWheel
       );
     };
-  }, [inputId, isReadOnly, isDisabled, decrement, increment]);
+  }, [inputId, isReadOnly, isDisabled, decrement, increment, ref]);
 
   let domProps = filterDOMProps(props, {labelable: true});
   let {labelProps, inputProps} = useTextField(

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -119,9 +119,12 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         crossOffset
       })
     );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
   // Update position when anything changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(updatePosition, deps);
 
   // Update position on window resize

packages/@react-aria/selection/src/useSelectableItem.ts

@@ -81,7 +81,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         focusSafely(ref.current);
       }
     }
-  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus]);
+  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus, focus]);
 
   // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -75,7 +75,7 @@ export function useSSRSafeId(defaultId?: string): string {
     console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');
   }
 
-  return useMemo(() => defaultId || `react-aria-${ctx.prefix}-${++ctx.current}`, [defaultId]);
+  return useMemo(() => defaultId || `react-aria-${ctx.prefix}-${++ctx.current}`, [defaultId, ctx]);
 }
 
 /**

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -120,6 +120,7 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     return () => {
       clearTimeout(state.scrollTimeout);
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   let updateSize = useCallback(() => {

packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx

@@ -70,7 +70,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
     } else {
       return styles;
     }
-  }, [isFocused]);
+  }, [isFocused, style]);
 
   return {
     visuallyHiddenProps: {

packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx

@@ -118,10 +118,14 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
         yield computeVisibleItems(newVisibleItems);
       }
     });
+  // Don't need to include childArray.length in dep array cuz children is already in array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listRef, children, setVisibleItems, showRoot, isMultiline]);
 
   useResizeObserver({ref: domRef, onResize: updateOverflow});
 
+  // Don't need to include updateOverflow in dep array cuz children is already in array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updateOverflow, [children]);
 
   let contents = childArray;

packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -12,6 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {Breadcrumbs} from '../';
+import {Button} from '@react-spectrum/button';
+import {ButtonGroup} from '@react-spectrum/buttongroup';
 // import {Heading} from '@react-spectrum/text';
 import {Item} from '@react-stately/collections';
 import React from 'react';
@@ -136,6 +138,10 @@ storiesOf('Breadcrumbs', module)
         <Item>Root</Item>
       </Breadcrumbs>
     )
+  )
+  .add(
+    'adding breadcrumbs',
+    () => <DynamicBreadcrumbs />
   );
 
 function render(props = {}) {
@@ -179,3 +185,44 @@ function renderMany(props = {}) {
     </Breadcrumbs>
   );
 }
+
+let folders = [
+  {id: 1, label: 'Home'},
+  {id: 2, label: 'Trendy'},
+  {id: 3, label: 'March 2020 Assets'}
+];
+
+let DynamicBreadcrumbs = () => {
+  let [breadcrumbs, setBreadcrumbs] = React.useState(folders);
+  let addBreadcrumb = () => {
+    let newBreadcrumbs = [...breadcrumbs];
+    newBreadcrumbs.push({
+      id: breadcrumbs.length + 1,
+      label: `Breadcrumb ${breadcrumbs.length + 1}`
+    });
+
+    setBreadcrumbs(newBreadcrumbs);
+  };
+
+  let removeBreadcrumb = () => {
+    let newBreadcrumbs = [...breadcrumbs];
+    newBreadcrumbs.pop();
+    setBreadcrumbs(newBreadcrumbs);
+  };
+
+  return (
+    <div>
+      <Breadcrumbs>
+        {breadcrumbs.map(f => <Item key={f.id}>{f.label}</Item>)}
+      </Breadcrumbs>
+      <ButtonGroup marginEnd="30px">
+        <Button variant="secondary" onPress={() => addBreadcrumb()}>
+          Add Breadcrumb
+        </Button>
+        <Button variant="secondary" onPress={() => removeBreadcrumb()}>
+          Remove Breadcrumb
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};

packages/@react-spectrum/utils/src/Slots.tsx

@@ -11,7 +11,7 @@
  */
 
 import {mergeProps} from '@react-aria/utils';
-import React, {useContext, useMemo, useRef} from 'react';
+import React, {useContext, useMemo} from 'react';
 
 interface SlotProps {
   slot?: string
@@ -33,18 +33,20 @@ export function cssModuleToSlots(cssModule) {
 }
 
 export function SlotProvider(props) {
-  let stableEmptyObject = useRef({});
-  let parentSlots = useContext(SlotContext) || stableEmptyObject.current;
+  let parentSlots = useContext(SlotContext);
   let {slots = {}, children} = props;
 
   // Merge props for each slot from parent context and props
-  let value = useMemo(() =>
-    Object.keys(parentSlots)
+  let value = useMemo(() => {
+    let slotObj = parentSlots || {};
+    return (
+      Object.keys(slotObj)
       .concat(Object.keys(slots))
       .reduce((o, p) => ({
         ...o,
-        [p]: mergeProps(parentSlots[p] || {}, slots[p] || {})}), {})
-      , [parentSlots, slots]);
+        [p]: mergeProps(slotObj[p] || {}, slots[p] || {})}), {})
+    );
+  }, [parentSlots, slots]);
 
   return (
     <SlotContext.Provider value={value}>