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 { Modal } from "./Modal";
import { search, type SearchResponse } from "api/api"; import { search, type SearchResponse } from "api/api";
import SearchResults from "../SearchResults"; import SearchResults from "../SearchResults";
@ -21,7 +21,7 @@ interface Props {
export default function MergeModal(props: Props) { export default function MergeModal(props: Props) {
const [query, setQuery] = useState(props.currentTitle); const [query, setQuery] = useState(props.currentTitle);
const [data, setData] = useState<SearchResponse>(); const [data, setData] = useState<SearchResponse>();
const [debouncedQuery, setDebouncedQuery] = useState(query); const deferredQuery = useDeferredValue(query);
const [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>( const [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>(
{ title: "", id: 0 } { title: "", id: 0 }
); );
@ -73,26 +73,13 @@ export default function MergeModal(props: Props) {
}; };
useEffect(() => { useEffect(() => {
const handler = setTimeout(() => { if (deferredQuery) {
setDebouncedQuery(query); search(deferredQuery).then((r) => {
if (query === "") {
setData(undefined);
}
}, 300);
return () => {
clearTimeout(handler);
};
}, [query]);
useEffect(() => {
if (debouncedQuery) {
search(debouncedQuery).then((r) => {
r = props.mergeCleanerFunc(r, props.currentId); r = props.mergeCleanerFunc(r, props.currentId);
setData(r); setData(r);
}); });
} }
}, [debouncedQuery]); }, [deferredQuery]);
return ( return (
<Modal isOpen={props.open} onClose={closeMergeModal}> <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 { Modal } from "./Modal";
import { search, type SearchResponse } from "api/api"; import { search, type SearchResponse } from "api/api";
import SearchResults from "../SearchResults"; import SearchResults from "../SearchResults";
@ -11,7 +11,7 @@ interface Props {
export default function SearchModal({ open, setOpen }: Props) { export default function SearchModal({ open, setOpen }: Props) {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [data, setData] = useState<SearchResponse>(); const [data, setData] = useState<SearchResponse>();
const [debouncedQuery, setDebouncedQuery] = useState(query); const deferredQuery = useDeferredValue(query);
const closeSearchModal = () => { const closeSearchModal = () => {
setOpen(false); setOpen(false);
@ -20,25 +20,12 @@ export default function SearchModal({ open, setOpen }: Props) {
}; };
useEffect(() => { useEffect(() => {
const handler = setTimeout(() => { if (deferredQuery) {
setDebouncedQuery(query); search(deferredQuery).then((r) => {
if (query === "") {
setData(undefined);
}
}, 300);
return () => {
clearTimeout(handler);
};
}, [query]);
useEffect(() => {
if (debouncedQuery) {
search(debouncedQuery).then((r) => {
setData(r); setData(r);
}); });
} }
}, [debouncedQuery]); }, [deferredQuery]);
return ( return (
<Modal isOpen={open} onClose={closeSearchModal}> <Modal isOpen={open} onClose={closeSearchModal}>