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
Activity
Created by: lguychard
Warning: Cannot update a component from inside the function body of a different component.
Calling
setChildBreadcrumb()
in auseMemo()
callback is different from callingaddBreadcrumb()
in auseEffect()
callback:useEffect()
callbacks are scheduled to run side-effects after render, whereasuseMemo()
callbacks are intended to be pure, and cause no side-effects. SincesetChildBreadcrumb
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 inuseEffect()
.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 providedsetBreadcrumb()
function - This will eventually update the
rootBreadcrumb
- Since
rootBreadcrumb
is updated, a new parent breadcrumb is returned fromuseRootBreadcrumb()
at the next render cycle - This triggers a new call to
setChildBreadcrumb
- ...infinite loop.
- Calling
Created by: felixfbecker
I always assumed
useMemo()
was justuseEffect()
+useState()
in one, good to know the function must be pure. I guess we could putuseEffect()
+useState()
in a custom hook to make it work, but then there is always the annoyance that the ESLint rules won't check a customdeps
parameter of a custom hookYou'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?