@salesforce/ui-bundle-template-app-react-sample-b2x 3.0.0 → 3.1.0

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useMaintenanceRequests.ts

@@ -7,12 +7,7 @@ import {
 	type MaintenanceRequestNode,
 } from "@/api/maintenanceRequests/maintenanceRequestApi";
 import { ResultOrder } from "@/api/graphql-operations-types";
-import {
-	useCachedAsyncData,
-	clearCacheEntry,
-} from "@/features/object-search/hooks/useCachedAsyncData";
-
-const CACHE_KEY = "maintenance-requests";
+import { useAsyncData } from "@/hooks/useAsyncData";
 
 async function fetchMaintenanceNodes(): Promise<MaintenanceRequestNode[]> {
 	const result = await searchMaintenanceRequests({
@@ -30,14 +25,11 @@ export function useMaintenanceRequests(): {
 } {
 	const [generation, setGeneration] = useState(0);
 
-	const { data, loading, error } = useCachedAsyncData(fetchMaintenanceNodes, [generation], {
-		key: `${CACHE_KEY}:${generation}`,
-	});
+	const { data, loading, error } = useAsyncData(fetchMaintenanceNodes, [generation]);
 
 	const refetch = useCallback(() => {
-		clearCacheEntry(`${CACHE_KEY}:${generation}`);
 		setGeneration((g) => g + 1);
-	}, [generation]);
+	}, []);
 
 	return { requests: data ?? [], loading, error, refetch };
 }

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/usePropertyDetail.ts

@@ -8,10 +8,7 @@ import {
 	fetchListingById,
 	type PropertyDetailNode,
 } from "@/api/properties/propertyDetailGraphQL";
-import {
-	useCachedAsyncData,
-	clearCacheEntry,
-} from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 
 export interface PropertyDetailState {
 	property: PropertyDetailNode | null;
@@ -19,8 +16,6 @@ export interface PropertyDetailState {
 	error: string | null;
 }
 
-const CACHE_KEY_PREFIX = "property-detail";
-
 async function fetchDetail(id: string): Promise<PropertyDetailNode | null> {
 	// First try directly as a Property__c ID (common path).
 	const detail = await fetchPropertyDetailById(id);
@@ -38,21 +33,15 @@ export function usePropertyDetail(
 ): PropertyDetailState & { refetch: () => void } {
 	const [generation, setGeneration] = useState(0);
 	const trimmedId = id?.trim() ?? "";
-	const cacheKey = `${CACHE_KEY_PREFIX}:${trimmedId}:${generation}`;
 
-	const { data, loading, error } = useCachedAsyncData(
-		() => {
-			if (!trimmedId) return Promise.resolve(null);
-			return fetchDetail(trimmedId);
-		},
-		[trimmedId, generation],
-		{ key: cacheKey },
-	);
+	const { data, loading, error } = useAsyncData(() => {
+		if (!trimmedId) return Promise.resolve(null);
+		return fetchDetail(trimmedId);
+	}, [trimmedId, generation]);
 
 	const refetch = useCallback(() => {
-		clearCacheEntry(cacheKey);
 		setGeneration((g) => g + 1);
-	}, [cacheKey]);
+	}, []);
 
 	return {
 		property: data ?? null,

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/usePropertyMapMarkers.ts

@@ -82,47 +82,53 @@ export function usePropertyMapMarkers(results: PropertySearchNode[]): {
 		}
 	}
 	const idsKey = [...new Set(propertyIds)].join(",");
+	const uniqIds = idsKey === "" ? [] : idsKey.split(",");
 
-	const resultsRef = useRef(results);
+	// Compute direct markers synchronously (nodes that already have coordinates)
+	const directMarkers: MapMarker[] = [];
+	const missingIds: string[] = [];
+	for (const node of results) {
+		if (!uniqIds.includes(node.Id)) continue;
+		const coords = getCoordinatesFromNode(node);
+		if (coords) {
+			directMarkers.push({
+				lat: coords.lat,
+				lng: coords.lng,
+				label: propertyIdToLabel.get(node.Id) ?? "Property",
+				propertyId: node.Id,
+			});
+		}
+	}
+	for (const id of uniqIds) {
+		const hasDirect = directMarkers.some((m) => m.propertyId === id);
+		if (!hasDirect) missingIds.push(id);
+	}
+
+	// Handle cases that don't need async work during render
+	const [prevIdsKey, setPrevIdsKey] = useState(idsKey);
+	if (prevIdsKey !== idsKey) {
+		setPrevIdsKey(idsKey);
+		if (uniqIds.length === 0) {
+			if (markers.length > 0) setMarkers([]);
+			if (loading) setLoading(false);
+		} else if (missingIds.length === 0) {
+			setMarkers(spreadDuplicateMarkers(directMarkers));
+			if (loading) setLoading(false);
+		} else {
+			if (!loading) setLoading(true);
+		}
+	}
+
+	// Stable reference to labels for use in the async effect
 	const labelMapRef = useRef(propertyIdToLabel);
 	useEffect(() => {
-		resultsRef.current = results;
 		labelMapRef.current = propertyIdToLabel;
 	});
 
 	useEffect(() => {
-		const uniqIds = idsKey === "" ? [] : idsKey.split(",");
-		if (uniqIds.length === 0) {
-			setMarkers([]);
-			setLoading(false);
-			return;
-		}
+		if (uniqIds.length === 0 || missingIds.length === 0) return;
 		let cancelled = false;
-		setLoading(true);
 		const currentLabels = labelMapRef.current;
-		const directMarkers: MapMarker[] = [];
-		const missingIds: string[] = [];
-		for (const node of results) {
-			if (!uniqIds.includes(node.Id)) continue;
-			const coords = getCoordinatesFromNode(node);
-			if (coords) {
-				directMarkers.push({
-					lat: coords.lat,
-					lng: coords.lng,
-					label: propertyIdToLabel.get(node.Id) ?? "Property",
-					propertyId: node.Id,
-				});
-			}
-		}
-		for (const id of uniqIds) {
-			const hasDirect = directMarkers.some((m) => m.propertyId === id);
-			if (!hasDirect) missingIds.push(id);
-		}
-		if (missingIds.length === 0) {
-			setMarkers(spreadDuplicateMarkers(directMarkers));
-			setLoading(false);
-			return;
-		}
 		fetchPropertyAddresses(missingIds)
 			.then((idToAddress) => {
 				if (cancelled) return;
@@ -130,8 +136,10 @@ export function usePropertyMapMarkers(results: PropertySearchNode[]): {
 					([, addr]) => addr != null && addr.trim() !== "",
 				);
 				if (toGeocode.length === 0) {
-					setMarkers(spreadDuplicateMarkers(directMarkers));
-					setLoading(false);
+					if (!cancelled) {
+						setMarkers(spreadDuplicateMarkers(directMarkers));
+						setLoading(false);
+					}
 					return;
 				}
 				Promise.all(
@@ -175,6 +183,7 @@ export function usePropertyMapMarkers(results: PropertySearchNode[]): {
 		return () => {
 			cancelled = true;
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps --- only re-run when IDs change
 	}, [idsKey]);
 
 	return { markers, loading };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useWeather.ts

@@ -3,7 +3,7 @@
  * Detects user location via Geolocation API; falls back to San Francisco.
  */
 import { useState, useEffect } from "react";
-import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 
 const FALLBACK = {
 	LAT: 37.7749,
@@ -297,10 +297,9 @@ export function useWeather(lat?: number | null, lng?: number | null) {
 	const longitude = lng ?? geo.longitude;
 	const canFetch = lat != null || geo.resolved;
 
-	const cached = useCachedAsyncData(
+	const cached = useAsyncData(
 		() => fetchWeather(latitude, longitude),
 		[latitude, longitude, canFetch],
-		{ key: `weather:${latitude},${longitude}:${canFetch}`, ttl: 300_000 },
 	);
 
 	if (!canFetch) {

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Application.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams, Link } from "react-router";
-import { useState, type ChangeEvent, type SubmitEvent } from "react";
+import { useCallback, useState, type ChangeEvent, type SubmitEvent } from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -9,8 +9,7 @@ import { SkeletonField } from "@/components/SkeletonPrimitives";
 import { fetchPropertyDetailById } from "@/api/properties/propertyDetailGraphQL";
 import { createApplicationRecord } from "@/api/applications/applicationApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
-import { fetchUserContact } from "../features/authentication/api/userProfileApi";
-import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 
 function ApplicationSkeleton() {
 	return (
@@ -46,28 +45,14 @@ export default function Application() {
 	const [searchParams] = useSearchParams();
 	const propertyId = searchParams.get("propertyId") ?? "";
 
-	const { data: contactData } = useCachedAsyncData(
-		() => {
-			if (!user?.id) return Promise.resolve(null);
-			return fetchUserContact<{ ContactId?: string }>(user.id);
-		},
-		[user?.id],
-		{ key: `contact:${user?.id ?? ""}`, ttl: 300_000 },
-	);
-	const contactId = contactData?.ContactId ?? null;
-
 	const {
 		data: property,
 		loading,
 		error: loadError,
-	} = useCachedAsyncData(
-		() => {
-			if (!propertyId?.trim()) return Promise.resolve(null);
-			return fetchPropertyDetailById(propertyId);
-		},
-		[propertyId],
-		{ key: `app-property:${propertyId}` },
-	);
+	} = useAsyncData(() => {
+		if (!propertyId?.trim()) return Promise.resolve(null);
+		return fetchPropertyDetailById(propertyId);
+	}, [propertyId]);
 
 	const listing = property?.Property_Listings__r?.edges?.[0]?.node ?? null;
 	const images = (property?.Property_Images__r?.edges ?? []).flatMap((e) =>
@@ -85,40 +70,56 @@ export default function Application() {
 
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
-	const [submittedId, setSubmittedId] = useState<string | null>(null);
+	const [submittedName, setSubmittedName] = useState<string | null>(null);
 
-	const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		setSubmitError(null);
-		setSubmitting(true);
-		try {
-			const id = await createApplicationRecord({
-				Property__c: propertyId || null,
-				Status__c: "Submitted",
-				User__c: contactId || user?.id || "",
-				Start_Date__c: moveInDate.trim() || null,
-				Employment__c: employment.trim() || null,
-				References__c: references.trim() || null,
-			});
-			setSubmittedId(id.id);
-		} catch (err) {
-			setSubmitError(err instanceof Error ? err.message : "Failed to submit application.");
-		} finally {
-			setSubmitting(false);
-		}
-	};
+	const handleSubmit = useCallback(
+		async (e: SubmitEvent<HTMLFormElement>) => {
+			e.preventDefault();
+			setSubmitError(null);
+			setSubmitting(true);
+			try {
+				const result = await createApplicationRecord({
+					Property__c: propertyId || null,
+					Status__c: "Submitted",
+					User__c: user?.id || "",
+					Start_Date__c: moveInDate.trim() || null,
+					Employment__c: employment.trim() || null,
+					References__c: references.trim() || null,
+				});
+				setSubmittedName(result.name ?? result.id);
+			} catch (err) {
+				setSubmitError(err instanceof Error ? err.message : "Failed to submit application.");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[propertyId, moveInDate, employment, references, user],
+	);
 
 	if (loading) {
 		return <ApplicationSkeleton />;
 	}
 
-	if (submittedId) {
+	if (submittedName) {
 		return (
 			<div className="mx-auto max-w-[900px]">
 				<Card className="mb-6 rounded-2xl border border-border p-6 shadow-sm">
 					<h2 className="mb-2 text-2xl font-semibold text-foreground">Application submitted</h2>
 					<p className="text-sm text-muted-foreground">
-						Your application has been saved. Reference: {submittedId}
+						Your application
+						{propertyName ? (
+							<>
+								{" "}
+								for <span className="font-medium text-foreground">{propertyName}</span>
+							</>
+						) : null}{" "}
+						has been submitted.
+						{submittedName && (
+							<>
+								{" "}
+								Reference: <span className="font-medium text-foreground">{submittedName}</span>
+							</>
+						)}
 					</p>
 					<div className="mt-4 flex gap-2 items-center">
 						<Link to="/properties" className="text-sm text-primary no-underline hover:underline">

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Contact.tsx

@@ -9,7 +9,7 @@ import { Loader2 } from "lucide-react";
 import { createContactUsLead } from "@/api/leads/leadApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { fetchUserProfile } from "@/features/authentication/api/userProfileApi";
-import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import type { UserInfo } from "@/api/leads/leadApi";
 
 function SuccessCard() {
@@ -167,14 +167,10 @@ export default function Contact() {
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submitted, setSubmitted] = useState(false);
 
-	const { data: userInfo } = useCachedAsyncData(
-		() => {
-			if (!isAuthenticated || !user?.id) return Promise.resolve(null);
-			return fetchUserProfile<UserInfo>(user.id);
-		},
-		[isAuthenticated, user?.id],
-		{ key: `contact-user-profile:${user?.id ?? ""}`, ttl: 300_000 },
-	);
+	const { data: userInfo } = useAsyncData(() => {
+		if (!isAuthenticated || !user?.id) return Promise.resolve(null);
+		return fetchUserProfile<UserInfo>(user.id);
+	}, [isAuthenticated, user?.id]);
 
 	const handleSubmit = useCallback(
 		async (e: SubmitEvent<HTMLFormElement>) => {

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Home.tsx

@@ -13,7 +13,7 @@ import {
 	extractAmenities,
 	extractAddress,
 } from "@/api/properties/propertyNodeUtils";
-import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import PropertyListingCard, {
 	PropertyListingCardSkeleton,
 } from "@/components/properties/PropertyListingCard";
@@ -102,10 +102,9 @@ export default function Home() {
 		text: string;
 	} | null>(null);
 
-	const { data: searchResult, loading: featuredLoading } = useCachedAsyncData<PropertySearchResult>(
+	const { data: searchResult, loading: featuredLoading } = useAsyncData<PropertySearchResult>(
 		() => searchProperties({ first: FEATURED_PAGE_SIZE }),
 		[],
-		{ key: "featuredProperties" },
 	);
 
 	const featuredResults = useMemo(

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx

@@ -13,14 +13,12 @@ import {
 	type MaintenanceRequestNode,
 } from "@/api/maintenanceRequests/maintenanceRequestApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
+import { useTenantAccess } from "@/context/TenantAccessContext";
 import {
 	useObjectSearchParams,
 	type PaginationConfig,
 } from "@/features/object-search/hooks/useObjectSearchParams";
-import {
-	useCachedAsyncData,
-	clearCacheEntry,
-} from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import PaginationControls from "@/features/object-search/components/PaginationControls";
 import type {
 	Maintenance_Request__C_Filter,
@@ -90,6 +88,7 @@ function MaintenanceSkeleton() {
 
 export default function Maintenance() {
 	const { loading: authLoading } = useAuth();
+	const { tenantProperties } = useTenantAccess();
 
 	const { query, pagination } = useObjectSearchParams<
 		Maintenance_Request__C_Filter,
@@ -98,18 +97,11 @@ export default function Maintenance() {
 
 	const [refreshCounter, setRefreshCounter] = useState(0);
 
-	const searchKey = `maintenance-requests:${JSON.stringify({
-		orderBy: query.orderBy,
-		first: pagination.pageSize,
-		after: pagination.afterCursor,
-		refresh: refreshCounter,
-	})}`;
-
 	const {
 		data: searchResult,
 		loading,
 		error,
-	} = useCachedAsyncData(
+	} = useAsyncData(
 		() =>
 			searchMaintenanceRequests({
 				where: query.where,
@@ -118,7 +110,6 @@ export default function Maintenance() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor, refreshCounter],
-		{ key: searchKey },
 	);
 
 	const requests = useMemo(
@@ -138,6 +129,7 @@ export default function Maintenance() {
 	const [description, setDescription] = useState("");
 	const [type, setType] = useState<string>("");
 	const [priority, setPriority] = useState<string>("Standard");
+	const [selectedTenantIdx, setSelectedTenantIdx] = useState(0);
 	const [dateRequested, setDateRequested] = useState(() => {
 		const d = new Date();
 		return d.toISOString().slice(0, 10);
@@ -146,6 +138,8 @@ export default function Maintenance() {
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submitSuccess, setSubmitSuccess] = useState(false);
 
+	const selectedTenant = tenantProperties[selectedTenantIdx] ?? tenantProperties[0];
+
 	const handleSubmit = useCallback(
 		async (e: React.FormEvent) => {
 			e.preventDefault();
@@ -155,6 +149,10 @@ export default function Maintenance() {
 				setSubmitError("Title or description is required");
 				return;
 			}
+			if (!selectedTenant) {
+				setSubmitError("No property associated with your tenant record");
+				return;
+			}
 			setSubmitting(true);
 			setSubmitError(null);
 			setSubmitSuccess(false);
@@ -165,6 +163,8 @@ export default function Maintenance() {
 					Priority__c: priority,
 					Status__c: "New",
 					Scheduled__c: dateRequested ? new Date(dateRequested).toISOString() : undefined,
+					Property__c: selectedTenant.Property__c.value,
+					User__c: selectedTenant.Id,
 				});
 				setSubmitSuccess(true);
 				setTitle("");
@@ -172,7 +172,6 @@ export default function Maintenance() {
 				setType("");
 				setPriority("Standard");
 				setDateRequested(new Date().toISOString().slice(0, 10));
-				clearCacheEntry(searchKey);
 				setRefreshCounter((c) => c + 1);
 			} catch (err) {
 				setSubmitError(err instanceof Error ? err.message : "Failed to submit request");
@@ -180,7 +179,7 @@ export default function Maintenance() {
 				setSubmitting(false);
 			}
 		},
-		[title, description, type, priority, dateRequested, searchKey],
+		[title, description, type, priority, dateRequested, selectedTenant],
 	);
 
 	if (authLoading) return <MaintenanceSkeleton />;
@@ -193,6 +192,35 @@ export default function Maintenance() {
 				</CardHeader>
 				<CardContent className="space-y-4">
 					<form onSubmit={handleSubmit} className="space-y-4">
+						{tenantProperties.length > 1 && (
+							<div className="space-y-2">
+								<Label htmlFor="maintenance-property">Property *</Label>
+								<select
+									id="maintenance-property"
+									className="flex h-9 w-full rounded-xl border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-[color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary"
+									aria-label="Property"
+									value={selectedTenantIdx}
+									onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+										setSelectedTenantIdx(Number(e.target.value))
+									}
+								>
+									{tenantProperties.map((tp, idx) => (
+										<option key={tp.Property__c.value} value={idx}>
+											{tp.Property__r?.Address__c?.value ?? tp.Property__r?.Name?.value}
+										</option>
+									))}
+								</select>
+							</div>
+						)}
+						{tenantProperties.length === 1 && selectedTenant && (
+							<div className="space-y-2">
+								<Label>Property</Label>
+								<p className="text-sm text-muted-foreground">
+									{selectedTenant.Property__r?.Address__c?.value ??
+										selectedTenant.Property__r?.Name?.value}
+								</p>
+							</div>
+						)}
 						<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
 							<div className="space-y-2">
 								<Label htmlFor="maintenance-title">Title *</Label>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/PropertySearch.tsx

@@ -18,7 +18,7 @@ import {
 	useObjectSearchParams,
 	type PaginationConfig,
 } from "@/features/object-search/hooks/useObjectSearchParams";
-import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import type { FilterFieldConfig } from "@/features/object-search/utils/filterUtils";
 import type {
 	SortFieldConfig,
@@ -107,18 +107,11 @@ export default function PropertySearch() {
 	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
 
 	/* ── Data fetching ── */
-	const searchKey = `rentalProperties:${JSON.stringify({
-		where: query.where,
-		orderBy: query.orderBy,
-		first: pagination.pageSize,
-		after: pagination.afterCursor,
-	})}`;
-
 	const {
 		data: searchResult,
 		loading: resultsLoading,
 		error: resultsError,
-	} = useCachedAsyncData<PropertySearchResult>(
+	} = useAsyncData<PropertySearchResult>(
 		() =>
 			searchProperties({
 				where: query.where,
@@ -127,7 +120,6 @@ export default function PropertySearch() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
 	);
 
 	/* ── Derive results + maps ── */
@@ -208,20 +200,26 @@ export default function PropertySearch() {
 			}
 		}, SEARCH_FILTER_DEBOUNCE_MS);
 		return () => clearTimeout(t);
-	}, [searchQuery]);
+	}, [searchQuery, filters]);
 
 	// Sync local searchQuery when the committed value changes externally (e.g. URL nav)
-	useEffect(() => {
+	const [prevCommittedSearchValue, setPrevCommittedSearchValue] = useState(committedSearchValue);
+	if (prevCommittedSearchValue !== committedSearchValue) {
+		setPrevCommittedSearchValue(committedSearchValue);
 		setSearchQuery(committedSearchValue);
-	}, [committedSearchValue]);
+	}
 
 	const committedPriceFilter = filters.active.find((f) => f.field === "Monthly_Rent__c");
 	const [stagedPriceMin, setStagedPriceMin] = useState(committedPriceFilter?.min ?? "");
 	const [stagedPriceMax, setStagedPriceMax] = useState(committedPriceFilter?.max ?? "");
-	useEffect(() => {
+	const [prevPriceMin, setPrevPriceMin] = useState(committedPriceFilter?.min);
+	const [prevPriceMax, setPrevPriceMax] = useState(committedPriceFilter?.max);
+	if (prevPriceMin !== committedPriceFilter?.min || prevPriceMax !== committedPriceFilter?.max) {
+		setPrevPriceMin(committedPriceFilter?.min);
+		setPrevPriceMax(committedPriceFilter?.max);
 		setStagedPriceMin(committedPriceFilter?.min ?? "");
 		setStagedPriceMax(committedPriceFilter?.max ?? "");
-	}, [committedPriceFilter?.min, committedPriceFilter?.max]);
+	}
 
 	const committedBedroomFilter = filters.active.find((f) => f.field === "Bedrooms__c");
 	const committedBedrooms = rangeToBedroomBucket(
@@ -229,15 +227,19 @@ export default function PropertySearch() {
 		committedBedroomFilter?.max,
 	);
 	const [stagedBedrooms, setStagedBedrooms] = useState<BedroomFilter>(committedBedrooms);
-	useEffect(() => {
+	const [prevCommittedBedrooms, setPrevCommittedBedrooms] = useState(committedBedrooms);
+	if (prevCommittedBedrooms !== committedBedrooms) {
+		setPrevCommittedBedrooms(committedBedrooms);
 		setStagedBedrooms(committedBedrooms);
-	}, [committedBedrooms]);
+	}
 
 	const committedSortBy = sortStateToSortBy(sort.current);
 	const [stagedSortBy, setStagedSortBy] = useState<SortBy>(committedSortBy ?? "price_asc");
-	useEffect(() => {
+	const [prevCommittedSortBy, setPrevCommittedSortBy] = useState(committedSortBy);
+	if (prevCommittedSortBy !== committedSortBy) {
+		setPrevCommittedSortBy(committedSortBy);
 		setStagedSortBy(committedSortBy ?? "price_asc");
-	}, [committedSortBy]);
+	}
 
 	// Set default sort on mount if none set
 	useEffect(() => {