gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-04-23 04:21:51 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch to react native useDeferedValue instead of manual debouncing

Browse source
This commit is contained in:
onespaceman 2026-02-16 11:59:42 -05:00
parent 0ec7b458cc
commit e36eb48036
2 changed files with 10 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/app/components/modals/SearchModal.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useDeferredValue, useEffect, useState } from "react";
import { Modal } from "./Modal";
import { search, type SearchResponse } from "api/api";
import SearchResults from "../SearchResults";
@ -11,7 +11,7 @@ interface Props {
export default function SearchModal({ open, setOpen }: Props) {
const [query, setQuery] = useState("");
const [data, setData] = useState<SearchResponse>();
const [debouncedQuery, setDebouncedQuery] = useState(query);
const deferredQuery = useDeferredValue(query);
const closeSearchModal = () => {
setOpen(false);
@ -20,25 +20,12 @@ export default function SearchModal({ open, setOpen }: Props) {
};
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedQuery(query);
if (query === "") {
setData(undefined);
}
}, 300);
return () => {
clearTimeout(handler);
};
}, [query]);
useEffect(() => {
if (debouncedQuery) {
search(debouncedQuery).then((r) => {
if (deferredQuery) {
search(deferredQuery).then((r) => {
setData(r);
});
}
}, [debouncedQuery]);
}, [deferredQuery]);
return (
<Modal isOpen={open} onClose={closeSearchModal}>