Refactor useEffect hook with useCallback - 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);
  });
}

Asaf Aviv · Accepted Answer · 2020-02-22 16:12:42Z

3

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

answered Feb 22, 2020 at 16:12

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alexander Kim Over a year ago

Thanks, but your useCallback() with empty deps, would cause the same error, as useEffect with empty deps :) BTW, thanks for React.FC note, i've read before that many people aren't preferring to use it, but couldn't understand - why.

Arnaud Claudel Over a year ago

@AlexanderKim it doesn't produce the error. Have you tried the code ?

Asaf Aviv Over a year ago

What error exactly? I have added crumbs as a dependency in useEffect

Alexander Kim Over a year ago

@AsafAviv, had an error in my code, now it doesn't complain about empty deps in useCallback, but i still have infinite loop with re-renders. Will update my question with what i have tried. I just forgot to add explicitly [crumbs] in useEffect deps, BUT isn't omitting deps at all automatically adds everything in the deps?

Asaf Aviv Over a year ago

@AlexanderKim You didn't add crumbs as a dependency to useEffect, useEffect without a second argument will run on every re-render

|

Collectives™ on Stack Overflow

Refactor useEffect hook with useCallback - React

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related