Skip to content
Snippets Groups Projects

Make breadcrumbs props less leaky and more tree/linked-list-like

Created by: felixfbecker

This is an attempt at https://github.com/sourcegraph/sourcegraph/pull/12536#issuecomment-667259404

Unfortunately I am running into these errors:

Warning: Cannot update a component from inside the function body of a different component.
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I'm not sure how to prevent them (if this approach is inherently flawed, or whether I overlooked something and made a mistake somewhere)

Merge request reports

Approval is optional

Closed by avatar (Oct 8, 2025 10:55pm UTC)

Merge details

  • The changes were not merged into marek/repo-header-contributions-prop.

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Created by: lguychard

    Warning: Cannot update a component from inside the function body of a different component.

    Calling setChildBreadcrumb() in a useMemo() callback is different from calling addBreadcrumb() in a useEffect() callback: useEffect() callbacks are scheduled to run side-effects after render, whereas useMemo() callbacks are intended to be pure, and cause no side-effects. Since setChildBreadcrumb has side-effects (it updates state contained in the parent component), it causes this warning. I don't see a way to remove this warning without having all side-effects (setState() calls) performed in useEffect().

    Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

    Unless I'm missing something:

    • Calling setChildBreadcrumb() calls the provided setBreadcrumb() function
    • This will eventually update the rootBreadcrumb
    • Since rootBreadcrumb is updated, a new parent breadcrumb is returned from useRootBreadcrumb() at the next render cycle
    • This triggers a new call to setChildBreadcrumb
    • ...infinite loop.
  • Created by: felixfbecker

    I always assumed useMemo() was just useEffect() + useState() in one, good to know the function must be pure. I guess we could put useEffect() + useState() in a custom hook to make it work, but then there is always the annoyance that the ESLint rules won't check a custom deps parameter of a custom hook :confused:

    You're right about the infinite loop, I'm not sure how to solve this. Do you have any other ideas? Or do you think keeping (leaking) breadcrumb items and remembering the initial order forever is fine? :thinking:

Please register or sign in to reply
Loading