自定義 React Hooks 以及在 useEffect 掛鈎中保留的內容

Question

我有以下代碼，我想知道如何提高性能，具體來說，我應該移動const fuse = new Fuse...部分和buildSearchRequest中的 buildSearchRequest function 以便僅在更改搜索查詢時調用它？ 我注意到我的使用自定義鈎子的代碼多次點擊new Fuse部分。

    const [searchResults, setSearchResults] = React.useState([])
    const fuse = new Fuse(DummySearchResponse.results, {
        keys: ["data.programmeTitle"],
        includeScore: true,
        threshold: 0.2,
    })
    const searchApiUrlStart = "http://mimir.prd.oasvc.itv.com/search?query="
    const searchApiUrlEnd =
        "&entityType=programme&streamingPlatform=itv_hub&checkAvailability=true"

    const buildSearchRequest = (searchString) => {
        return (
            searchApiUrlStart +
            encodeURIComponent(searchString) +
            searchApiUrlEnd
        )
    }

    React.useEffect(() => {
        if (!query) return

        const fetchData = async () => {
            let searchData
            if (useLiveSearchApi) {
                const liveResponse = await fetch(
                    "http://mimir.prd.oasvc.itv.com/search?query=" +
                        buildSearchRequest(query) +
                        "&entityType=programme&streamingPlatform=itv_hub&checkAvailability=true"
                )

                const liveJson = await liveResponse.json()
                const liveResults = await liveJson.results
                searchData = liveResults

            } else {
                const fuseResponse = await fuse.search(query)
                const fuseJson = await fuseResponse.map((result) => {
                    return result.item
                })
                searchData = fuseJson
            }

            const mappedResults = await searchData.map((searchItem) => ({
                title: searchItem.data.programmeTitle,
                contentImageUrl: searchItem.data.imageHref,
                programmeCCId: searchItem.data.programmeCCId,
                episodeId: searchItem.data.episodeId,
            }))

            setSearchResults(mappedResults)
        }

        fetchData()
    }, [query])

    return { searchResults }
}```

Answer 1

首先，避免在 useEffect 中聲明回調。 您需要做的是使用 useCallBack 掛鈎來聲明您的 fetchData callBack

你的代碼至少應該看起來像......

const fetchData = useCallBack(() => {
    // Your Fetch Data Code

}, [<dependency array>]) // Here, you want to add all dependencies whose current state you need. Note that if a dependency is not added here, and you use it within the useCallBack, you'll only access a stale state (state during initialization), and never the updated dependency state.

// Here are three ways you can declare your useEffect
useEffect(fetchData, [query]); You probably wanna use this one. Less lines and much cleaner.

useEffect(() => fetchData(), [query]);

useEffect(() => {
    fetchData();
}, [query]);

只有在更新query變量后才會調用您的 useEffect。 因此，為確保不觸發 sideEffect，請確保您的 useEffect 或指定為觸發器的 useCallBack 不會更新變量。 如果是這種情況，您的代碼將陷入無限循環。