fix: centralize state and reduce render cycles to derisk component (#5723)

Author: asalem1

src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx

@@ -63,26 +63,15 @@ export interface Props extends StandardFunctionProps {
 
 type State = {
   showTypeAheadMenu: boolean
-  selectedItem?: TypeAheadMenuItem
 }
 
 export class GlobalHeaderDropdown extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
       showTypeAheadMenu: this.props.onlyRenderSubmenu ?? false,
-      selectedItem: this.props.typeAheadSelectedOption || null,
     }
   }
-
-  componentDidUpdate() {
-    if (this.props.typeAheadSelectedOption !== this.state.selectedItem) {
-      this.setState({
-        selectedItem: this.props.typeAheadSelectedOption,
-      })
-    }
-  }
-
   private dropdownButton = (
     active: boolean,
     onClick: (e: MouseEvent<HTMLElement>) => void
@@ -92,8 +81,8 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
       defaultTestID,
       dropdownButtonIcon,
       dropdownButtonSize,
+      typeAheadSelectedOption,
     } = this.props
-    const {selectedItem} = this.state
     return (
       <Dropdown.Button
         active={active}
@@ -103,7 +92,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         testID={defaultTestID}
         trailingIcon={dropdownButtonIcon || IconFont.DoubleCaretVertical}
       >
-        {selectedItem?.name || defaultButtonText}
+        {typeAheadSelectedOption?.name || defaultButtonText}
       </Dropdown.Button>
     )
   }
@@ -154,17 +143,17 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
   }
 
   private renderTypeAheadMenu = () => {
-    const {typeAheadMenuOptions} = this.props
-    const {selectedItem} = this.state
     const {
       dropdownMenuStyle,
+      typeAheadMenuOptions,
+      typeAheadSelectedOption,
       typeAheadEventPrefix,
       typeAheadInputPlaceholder,
       typeAheadOnSelectOption,
     } = this.props
     return (
       <GlobalHeaderTypeAheadMenu
-        defaultSelectedItem={selectedItem}
+        defaultSelectedItem={typeAheadSelectedOption ?? null}
         onSelectOption={typeAheadOnSelectOption}
         style={dropdownMenuStyle}
         testID={this.props.typeAheadTestID}

src/shared/contexts/buckets.tsx

@@ -102,7 +102,7 @@ export const BucketProvider: FC<Props> = ({
         )
       )
     }
-  }, [buckets, loading])
+  }, [buckets, dispatch, loading])
 
   // TODO: load bucket creation limits on org change
   // expose limits to frontend