Bug: "Should have a queue. This is likely a bug in React" about react

[Nantris]

This occurs ONLY on the first instance of taking the "problematic action" that causes the bug, and only if take on the the first mount of the problem component.

Identical actions after this crash has occurred and the component is re-mounted via the ErrorBoundary will not produce any errors. Loading the component a second time (different props of the same sort) also prevents this issue from occurring.

This extremely strange circumstance is making debugging unrelated issues quite difficult.

[Nantris]

This is really plaguing us. I hope this can be resolved.

[Nantris]

Friendly bump. I know this seems like impatience but an unmitigatable bug in React is a big problem for us.

[eps1lon]

Calling hooks conditionally usually leads to these kind of bugs. If you want help fixing this issue, we need a minimal reproduction.

[Nantris]

Thanks for your reply @eps1lon. We're 100% not calling hooks conditionally. I manually reviewed the code three times, asked ChatGPT, and ESLint also agrees. Unfortunately I have no idea what code is really causing the problem because commenting out the "problem hook" is what leads to this error. How can I glean any clue about the underlying cause?

I can't share our private code and the error message provides not a single avenue to pursue. It would be a different thing if I knew commenting out some code resolved an issue - but in this case it causes the issue.

[eps1lon]

I'd start by removing surrounding code until it no longer reproduces. It might also be a sibling or parent component that calls hooks conditionally.

[Nantris]

Thanks for the advice @eps1lon! I'll see if I can uncover anything.

[Nantris]

@eps1lon:

Results in error: should have queue:

export const useEditExploreCapabilities = ({
  noEdits,
  isHashtag,
}) => {
  const [canEdit, setCanEdit] = useState(!noEdits && !isHashtag);
  const [canExplore, setCanExplore] = useState(canEdit);
  
  useEffect(() => {
    setCanEdit(noEdits && !isHashtag);
  }, [noEdits, isHashtag]);

  useEffect(() => {
    setCanExplore(canEdit || (isHashtag));
  }, [isHashtag, canEdit]);

  return [canEdit, canExplore];
};

Works fine:

export const useEditExploreCapabilities = ({
  noEdits,
  isHashtag
}) => {
  const [canEdit, setCanEdit] = useState(!noEdits && !isHashtag);
  const [canExplore, setCanExplore] = useState(canEdit);

  useEffect(() => {
    setCanEdit(!noEdits && !isHashtag);
    setCanExplore(canEdit || (isHashtag));
  }, [noEdits, isHashtag, canEdit]);

  return [canEdit, canExplore];
};

Is this expected? As far as I'm aware my original code didn't break any rules of hooks and seems, on the surface, more correct to me.

[eps1lon]

I can't repro this in isolation: https://codesandbox.io/p/sandbox/cranky-currying-gn777q-gn777q

Maybe another component in your tree is violating Rule of React? For minimal reproductions, try to remove as much as possible from the whole component tree.

[Nantris]

I am quite certain no rules of React (most especially rules of hooks) are being broken. ESLint agrees. I'm the only developer.

Since I have found a workaround I won't have time to work on this, but despite the inability to reproduce it in isolation, I feel confident this is a bug in React. The fact it was masked under other React errors further bolsters my belief.

[Nantris]

For what it's worth, this is inside StrictMode, but adding that to your repro didn't change anything.