React Hook useMemo 缺少依赖项：'handleClearData'

Question

This is my code below

const Search = ({ results }) => {
const dispatch = useDispatch();

const handleClearData = () => {
    dispatch(clearData());
};

const columns = useMemo(
    () => [
        {
            Header: 'G35 Number',
            accessor: 'g35Number',
            Cell: props => {
                const { original } = props.row;
                return (
                    <React.Fragment>
                        <Link data-tip data-for={`link-${original.sNumber}`}
                            to={{ pathname: `/search/${original.sNumber}`, state: { s: props.row.original } }} onClick={handleClearData}>
                            {original.g35Number}
                        </Link>
                    </React.Fragment>
                );
            },
        },
        {
            Header: 'Regn Number',
            accessor: 'regNumber',
        },
        {
            Header: 'File',
            accessor: 'file',
        },
        {
            Header: 'Details',
            accessor: 'details',
        }
    ],
    []
);

const data = useMemo(() => results, [results]); // eslint-disable-line react-hooks/exhaustive-deps

const renderTable = () => {
    return (
        <ReactTable columns={columns} data={data} />
    );
}

return (
    <div className="card py-3 px-4">
        {
            results?.length ?
                renderTable() :
                <div>No results.</div>
        }
    </div>
);
}export default Search;

I am getting the below warning:

React Hook useMemo has a missing dependency: 'handleClearData'. Either include it or remove the dependency array

I tried to add handleClearData in the dependency array of the useMemo, which gave me the below warning:

 The 'handleClearData' function makes the dependencies of useMemo Hook change on every render. Move it inside the useMemo callback. Alternatively, wrap the 'handleClearData' definition into its own useCallback() Hook

I did not understand what it meant when it said that I need to wrap it in its own useCallback() hook.

Can anyone help me what I am missing? I am not sure if I want to add anything in the dependency array if I just want to load it only for the first time (That if it works the same way in useEffect).

Answer 1

I was able to do resolve the warning by moving the function inside useMemo like below:

{
        Header: 'G35 Number',
        accessor: 'g35Number',
        Cell: props => {
            const { original } = props.row;
            const dispatch = useDispatch();

            const handleClearData = () => {
              dispatch(clearData());
            };
            return (
                <React.Fragment>
                    <Link data-tip data-for={`link-${original.sNumber}`}
                        to={{ pathname: `/search/${original.sNumber}`, state: { s: props.row.original } }} onClick={handleClearData}>
                        {original.g35Number}
                    </Link>
                </React.Fragment>
            );
        },
    }