gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 21:48:18 -08: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/MergeModal.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";
@ -21,7 +21,7 @@ interface Props {
export default function MergeModal(props: Props) {
const [query, setQuery] = useState(props.currentTitle);
const [data, setData] = useState<SearchResponse>();
const [debouncedQuery, setDebouncedQuery] = useState(query);
const deferredQuery = useDeferredValue(query);
const [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>(
{ title: "", id: 0 }
);
@ -73,26 +73,13 @@ export default function MergeModal(props: 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) => {
r = props.mergeCleanerFunc(r, props.currentId);
setData(r);
});
}
}, [debouncedQuery]);
}, [deferredQuery]);
return (
<Modal isOpen={props.open} onClose={closeMergeModal}>

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}>