reactjs - 如何使用带有 onChange 函数 REACT 的 useCallback Hook

Question

我有一个简单的 React 组件:如何通过添加 useCallback 钩子(Hook)来改进这个组件？ 在此组件中添加 useCallback 钩子(Hook)是个好主意吗？如果是，我应该将它添加到哪个函数。

import styled from "styled-components"
import React, { useState } from "react"
import { useGetFilteredBooks } from "../../hooks/useGetFilteredBooks"
import { useRecoilState } from "recoil"
import { Books, PageNumber, SearchText } from "../../recoil/globalState"



export const SearchBook = () => {
    const [text, setText] = useRecoilState(SearchText)
    const [pageNumber, setPageNumber] = useRecoilState(PageNumber)
    const [setBooks] = useRecoilState(Books);
    const { refetch } = useGetFilteredBooks(text, setBooks, setPageNumber);

    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setText(event.target.value)
    }

    const handleOnSubmit = (e: any) => {
        e.preventDefault();
        refetch();
    }


    return (
        <>
            <form onSubmit={handleOnSubmit}>
                <Input value={text} onChange={handleOnChange} placeholder="Enter the name of the book or author" />
                <button type="submit">Show</button>
            </form>
        </>
    )
}

const Input = styled.input`
    padding: 10px 10px;
    width: 300px;
`

Answer 1

在 useCallback 中内存一个函数是个好主意 如果你知道你将要使用这些函数作为其他 Hook (如 useEffect 或 useMemo)的依赖项 ，在你的情况下，你的函数非常微不足道，你没有将它们用作其他 Hook 的依赖，在每次重新渲染时重新创建它们的计算成本可以忽略不计，因此 useCallback 的使用，具体来说，这里不需要。请注意，如果您将其他非内存函数放在 useCallback 的 deps 数组中，那将一文不值。如果您仍计划将这些函数包装在 useCallback 中以在其他组件/ Hook 中使用它们:

import styled from "styled-components"
import React, { useState, useCallback } from "react"
import { useGetFilteredBooks } from "../../hooks/useGetFilteredBooks"
import { useRecoilState } from "recoil"
import { Books, PageNumber, SearchText } from "../../recoil/globalState"



export const SearchBook = () => {
    const [text, setText] = useRecoilState(SearchText)
    const [pageNumber, setPageNumber] = useRecoilState(PageNumber)
    const [setBooks] = useRecoilState(Books);
    const { refetch } = useGetFilteredBooks(text, setBooks, setPageNumber);

    const handleOnChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
        setText(event.target.value)
    },[])  // No deps needed here according to ESLint, since react setState<s> do not change during re-renders.

    const handleOnSubmit = useCallback((e: any) => {
        e.preventDefault();
        refetch();
    },[refetch]) // refetch is needed here, since it might change during re-renders, you should make sure to memoize that function as well


    return (
        <>
            <form onSubmit={handleOnSubmit}>
                <Input value={text} onChange={handleOnChange} placeholder="Enter the name of the book or author" />
                <button type="submit">Show</button>
            </form>
        </>
    )
}

const Input = styled.input`
    padding: 10px 10px;
    width: 300px;
`