React Hook useMemo has a missing dependency: 'handleClearData' - reactjs

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>
);
},
}