Set a breakpoint in React's source code, then load this function into the debugger. Call this function on a rendering `fiberNode` to see why the fiber is rerendering!

getReactRerenderReasonStack.js

getReactRerenderReasonStack = (fiberNode) => {
  const NoFlags = 0;
  const PerformedWork = 1;
  const Placement = 2;
  const Update = 4;
  const ChildDeletion = 16;
  const ContentReset = 32;
  const Callback = 64;
  const DidCapture = 128;
  const ForceClientRender = 256;
  const Ref = 512;
  const Snapshot = 1024;
  const Passive = 2048;
  const Hydrating = 4096;
  const Visibility = 8192;
  const StoreConsistency = 16384;

  const FlagMap = {
    NoFlags,
    PerformedWork,
    Placement,
    Update,
    ChildDeletion,
    ContentReset,
    Callback,
    DidCapture,
    ForceClientRender,
    Ref,
    Snapshot,
    Passive,
    Hydrating,
    Visibility,
    StoreConsistency,
  };

  const decomposeFlags = (flags) => {
    const result = [];
    for (const [key, value] of Object.entries(FlagMap)) {
      if ((flags & value) !== 0) {
        result.push(key);
      }
    }
    return result;
  };

  const stack = [];
  let currentNode = fiberNode;
  while (currentNode) {
    const name = currentNode.type.displayName || currentNode.type.name;
    const flags = currentNode.flags;
    const decomposedFlags = decomposeFlags(flags);
    const subtreeFlags = currentNode.subtreeFlags;
    const decomposedSubtreeFlags = decomposeFlags(subtreeFlags);
    stack.push({
      name,
      flags,
      decomposedFlags,
      subtreeFlags,
      decomposedSubtreeFlags,
    });
    currentNode = currentNode._debugOwner;
  }
  return stack;
};