feat(ui): Constant HookOrDefault usage (#80229)

HookOrDefault should be used outside of components to keep a stable
reference to the components created inside that function

static/app/views/organizationCreate/index.tsx

@@ -29,6 +29,11 @@ function removeDataStorageLocationFromFormData(
   return shallowFormDataClone;
 }
 
+const DataConsentCheck = HookOrDefault({
+  hookName: 'component:data-consent-org-creation-checkbox',
+  defaultComponent: null,
+});
+
 function OrganizationCreate() {
   const termsUrl = ConfigStore.get('termsUrl');
   const privacyUrl = ConfigStore.get('privacyUrl');
@@ -37,11 +42,6 @@ function OrganizationCreate() {
   const regionChoices = getRegionChoices();
   const client = useApi();
 
-  const DataConsentCheck = HookOrDefault({
-    hookName: 'component:data-consent-org-creation-checkbox',
-    defaultComponent: null,
-  });
-
   const hasDataConsent =
     HookStore.get('component:data-consent-org-creation-checkbox').length !== 0;
 

static/app/views/settings/components/settingsNavItem.tsx

@@ -21,12 +21,12 @@ type Props = {
   onClick?: (e: React.MouseEvent) => void;
 };
 
-function SettingsNavItem({badge, label, index, id, to, ...props}: Props) {
-  const LabelHook = HookOrDefault({
-    hookName: 'sidebar:item-label',
-    defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
-  });
+const LabelHook = HookOrDefault({
+  hookName: 'sidebar:item-label',
+  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+});
 
+function SettingsNavItem({badge, label, index, id, to, ...props}: Props) {
   let renderedBadge: React.ReactNode;
 
   if (badge === 'new') {