自定义 React Hooks 以及在 useEffect 挂钩中保留的内容

Question

I have the following code and I wonder how I can improve performance, specifically, should I move the const fuse = new Fuse... section and the buildSearchRequest function within useEffect so it is called only when the search query is changed? I have noticed my code that consumes the custom hooks hits the new Fuse section many times.

    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

First and foremost, avoid declaring a callback within the useEffect. What you need to do is use the useCallBack hook to declare your fetchData callBack

Your code should atleast look like...

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]);

Your useEffect will only be called once the query variable has been updated. So, to ensure a sideEffect is not triggered, ensure your useEffect or the useCallBack specified as the trigger does not update the variable. If this is the case, your code will be stuck in an indefinite loop.