Как написать функцию для обновления списка комнат для single-page application?

Question

[Maria_Ink]

У меня spa, написала код для сортировки комнат по цене, но при переходе на другие страницы state сохраняет старые данные и добавляет к ним новые, из-за чего вместо 6 объектов получается +6+6....
У меня из идей только проверка на какой странице находится пользователь и очистка state, но это не звучит как хорошая идея.

Основной код:

const [isLoading, setIsLoading] = useState(true);
	const [shouldSort, setShouldSort] = useState(false);
	const rooms = useSelector(selectRooms);

	useLayoutEffect(() => {
		if (!shouldSort) {
			rooms.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
			setIsLoading(false);
		} else {
			rooms.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
			setIsLoading(false);
		}
	}, [shouldSort, rooms]);

	useEffect(() => {
		dispatch(loadRoomsAsync());
	}, [dispatch]);

	setTimeout(setIsLoading, 1000);


return (
<div className={className}>
	{rooms.length > 0 ? (
		<div className="room-list">
			{rooms.map(({ id, title, imageUrl, price, reviews }) => (
				<RoomCard
					key={id}
					id={id}
					title={title}
					imageUrl={imageUrl}
					price={price}
					reviewsCount={reviews.length}
				/>
			))}
		</div>
	) : (
		<Error error={"Номера не найдены"} />
	)}
</div>)

Answer 1

[Михаил Р.]

Если я правильно понял вопрос, то Вам нужно чистить state между переходами?

const prevPathname = useRef(pathname);

useEffect(() => {
    if (pathname !== prevPathname.current) {
        dispatch(resetRooms());
    }

    prevPathname.current = pathname;
}, [pathname, dispatch]);

Comments

[Maria_Ink]

Действительно сработало. Спасибо!

[WbICHA]

А зачем prevPathname в стейте? Тут же самое место для рефа.

[Михаил Р.]

WbICHA, согласен