使用 useCallback 重构 useEffect 钩子 - React

Question

Dashboard component:

const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>([]);

const handleCrumbs = (data: Crumb[]) => {
  setBreadcrumbs(data);
};

return (
  <>
    <Breadcrumbs crumbsArray={breadcrumbs} />
    <Route
      path={`${path}/partners`}
      render={() => <Partners crumbs={handleCrumbs} />}
    />
  </>
);

Partners component:

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  }, []);
}

There i'm getting an error:

React Hook useEffect has a missing dependency: 'crumbs'. Either include it or remove the dependency array. If 'crumbs' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

How can i refactor this with useCallback? I can just disable eslint error and everything would work as expected, but how to do that in a "right way"?

Logic behind this, is when Partners component is mounted, i'm setting breadcrumb items in the parent component - Dashboard.

UPDATE 1

Dashboard:

const handleCrumbs = useCallback((data: Crumb[]) => {
  setBreadcrumbs(data);
}, []);

Partners:

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  });
}

Answer 1

Wrap handleCrumbs in useCallback and then it will be safe to add crumbs to the dependencies array because the reference will never change.

without useCallback it will end up in an infinite loop because on every re-render the reference of crumbs will change

Dashboard

const handleCrumbs = useCallback((data: Crumb[]) => {
  setBreadcrumbs(data);
}, []);

Partners

const Partners: React.FC<any> = ({ crumbs }) => {
  useEffect(() => {
    const arr = [1, 2, 3, 4, 5];
    crumbs(arr);
  }, [crumbs]);
}

Also, a lot of people prefer not to use React.FC and just type children explicitly if you need them, you can read more about it here