t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
fix debounce issue
tsiry-sandratraina.com
+12
-11
+12
-11
rockskyweb/src/layouts/Search/Search.tsx
+12
-11
rockskyweb/src/layouts/Search/Search.tsx
···
5
import { Input } from "baseui/input";
6
import { PLACEMENT, Popover } from "baseui/popover";
7
import _ from "lodash";
8
-
import { useEffect, useState } from "react";
9
import { Controller, useForm } from "react-hook-form";
10
import { Link as DefaultLink } from "react-router";
11
import z from "zod";
···
45
46
const keyword = watch("keyword");
47
48
useEffect(() => {
49
if (keyword.length === 0) {
50
setResults([]);
51
-
}
52
-
53
-
if (keyword.length > 1) {
54
-
const _search = async () => {
55
-
const data = await search(keyword);
56
-
setResults(data.records);
57
-
};
58
-
59
-
// debounce
60
-
_.debounce(_search, 100)();
61
}
62
// eslint-disable-next-line react-hooks/exhaustive-deps
63
}, [keyword]);
···
5
import { Input } from "baseui/input";
6
import { PLACEMENT, Popover } from "baseui/popover";
7
import _ from "lodash";
8
+
import { useCallback, useEffect, useState } from "react";
9
import { Controller, useForm } from "react-hook-form";
10
import { Link as DefaultLink } from "react-router";
11
import z from "zod";
···
45
46
const keyword = watch("keyword");
47
48
+
// eslint-disable-next-line react-hooks/exhaustive-deps
49
+
const debouncedSearch = useCallback(
50
+
_.debounce(async (keyword) => {
51
+
const data = await search(keyword);
52
+
setResults(data.records);
53
+
}, 300),
54
+
[search]
55
+
);
56
+
57
useEffect(() => {
58
if (keyword.length === 0) {
59
setResults([]);
60
+
} else if (keyword.length > 1) {
61
+
debouncedSearch(keyword);
62
}
63
// eslint-disable-next-line react-hooks/exhaustive-deps
64
}, [keyword]);