How to use startWorkOnPendingInteractions method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberWorkLoop.new.js

Source:ReactFiberWorkLoop.new.js

...1373  // If the root or lanes have changed, throw out the existing stack1374  // and prepare a fresh one. Otherwise we'll continue where we left off.1375  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {1376    prepareFreshStack(root, lanes);1377    startWorkOnPendingInteractions(root, lanes);1378  }1379  const prevInteractions = pushInteractions(root);1380  if (__DEV__) {1381    if (enableDebugTracing) {1382      logRenderStarted(lanes);1383    }1384  }1385  if (enableSchedulingProfiler) {1386    markRenderStarted(lanes);1387  }1388  do {1389    try {1390      workLoopSync();1391      break;1392    } catch (thrownValue) {1393      handleError(root, thrownValue);1394    }1395  } while (true);1396  resetContextDependencies();1397  if (enableSchedulerTracing) {1398    popInteractions(((prevInteractions: any): Set<Interaction>));1399  }1400  executionContext = prevExecutionContext;1401  popDispatcher(prevDispatcher);1402  if (workInProgress !== null) {1403    // This is a sync render, so we should have finished the whole tree.1404    invariant(1405      false,1406      'Cannot commit an incomplete root. This error is likely caused by a ' +1407        'bug in React. Please file an issue.',1408    );1409  }1410  if (__DEV__) {1411    if (enableDebugTracing) {1412      logRenderStopped();1413    }1414  }1415  if (enableSchedulingProfiler) {1416    markRenderStopped();1417  }1418  // Set this to null to indicate there's no in-progress render.1419  workInProgressRoot = null;1420  workInProgressRootRenderLanes = NoLanes;1421  return workInProgressRootExitStatus;1422}1423// The work loop is an extremely hot path. Tell Closure not to inline it.1424/** @noinline */1425function workLoopSync() {1426  // Already timed out, so perform work without checking if we need to yield.1427  while (workInProgress !== null) {1428    performUnitOfWork(workInProgress);1429  }1430}1431function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {1432  const prevExecutionContext = executionContext;1433  executionContext |= RenderContext;1434  const prevDispatcher = pushDispatcher();1435  // If the root or lanes have changed, throw out the existing stack1436  // and prepare a fresh one. Otherwise we'll continue where we left off.1437  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {1438    resetRenderTimer();1439    prepareFreshStack(root, lanes);1440    startWorkOnPendingInteractions(root, lanes);1441  }1442  const prevInteractions = pushInteractions(root);1443  if (__DEV__) {1444    if (enableDebugTracing) {1445      logRenderStarted(lanes);1446    }1447  }1448  if (enableSchedulingProfiler) {1449    markRenderStarted(lanes);1450  }1451  do {1452    try {1453      workLoopConcurrent();1454      break;1455    } catch (thrownValue) {1456      handleError(root, thrownValue);1457    }1458  } while (true);1459  resetContextDependencies();1460  if (enableSchedulerTracing) {1461    popInteractions(((prevInteractions: any): Set<Interaction>));1462  }1463  popDispatcher(prevDispatcher);1464  executionContext = prevExecutionContext;1465  if (__DEV__) {1466    if (enableDebugTracing) {1467      logRenderStopped();1468    }1469  }1470  // Check if the tree has completed.1471  if (workInProgress !== null) {1472    // Still work remaining.1473    if (enableSchedulingProfiler) {1474      markRenderYielded();1475    }1476    return RootIncomplete;1477  } else {1478    // Completed the tree.1479    if (enableSchedulingProfiler) {1480      markRenderStopped();1481    }1482    // Set this to null to indicate there's no in-progress render.1483    workInProgressRoot = null;1484    workInProgressRootRenderLanes = NoLanes;1485    // Return the final exit status.1486    return workInProgressRootExitStatus;1487  }1488}1489/** @noinline */1490function workLoopConcurrent() {1491  // Perform work until Scheduler asks us to yield1492  while (workInProgress !== null && !shouldYield()) {1493    performUnitOfWork(workInProgress);1494  }1495}1496function performUnitOfWork(unitOfWork: Fiber): void {1497  // The current, flushed, state of this fiber is the alternate. Ideally1498  // nothing should rely on this, but relying on it here means that we don't1499  // need an additional field on the work in progress.1500  const current = unitOfWork.alternate;1501  setCurrentDebugFiberInDEV(unitOfWork);1502  let next;1503  if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {1504    startProfilerTimer(unitOfWork);1505    next = beginWork(current, unitOfWork, subtreeRenderLanes);1506    stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);1507  } else {1508    next = beginWork(current, unitOfWork, subtreeRenderLanes);1509  }1510  resetCurrentDebugFiberInDEV();1511  unitOfWork.memoizedProps = unitOfWork.pendingProps;1512  if (next === null) {1513    // If this doesn't spawn new work, complete the current work.1514    completeUnitOfWork(unitOfWork);1515  } else {1516    workInProgress = next;1517  }1518  ReactCurrentOwner.current = null;1519}1520function completeUnitOfWork(unitOfWork: Fiber): void {1521  // Attempt to complete the current unit of work, then move to the next1522  // sibling. If there are no more siblings, return to the parent fiber.1523  let completedWork = unitOfWork;1524  do {1525    // The current, flushed, state of this fiber is the alternate. Ideally1526    // nothing should rely on this, but relying on it here means that we don't1527    // need an additional field on the work in progress.1528    const current = completedWork.alternate;1529    const returnFiber = completedWork.return;1530    // Check if the work completed or if something threw.1531    if ((completedWork.flags & Incomplete) === NoFlags) {1532      setCurrentDebugFiberInDEV(completedWork);1533      let next;1534      if (1535        !enableProfilerTimer ||1536        (completedWork.mode & ProfileMode) === NoMode1537      ) {1538        next = completeWork(current, completedWork, subtreeRenderLanes);1539      } else {1540        startProfilerTimer(completedWork);1541        next = completeWork(current, completedWork, subtreeRenderLanes);1542        // Update render duration assuming we didn't error.1543        stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);1544      }1545      resetCurrentDebugFiberInDEV();1546      if (next !== null) {1547        // Completing this fiber spawned new work. Work on that next.1548        workInProgress = next;1549        return;1550      }1551    } else {1552      // This fiber did not complete because something threw. Pop values off1553      // the stack without entering the complete phase. If this is a boundary,1554      // capture values if possible.1555      const next = unwindWork(completedWork, subtreeRenderLanes);1556      // Because this fiber did not complete, don't reset its expiration time.1557      if (next !== null) {1558        // If completing this work spawned new work, do that next. We'll come1559        // back here again.1560        // Since we're restarting, remove anything that is not a host effect1561        // from the effect tag.1562        next.flags &= HostEffectMask;1563        workInProgress = next;1564        return;1565      }1566      if (1567        enableProfilerTimer &&1568        (completedWork.mode & ProfileMode) !== NoMode1569      ) {1570        // Record the render duration for the fiber that errored.1571        stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);1572        // Include the time spent working on failed children before continuing.1573        let actualDuration = completedWork.actualDuration;1574        let child = completedWork.child;1575        while (child !== null) {1576          actualDuration += child.actualDuration;1577          child = child.sibling;1578        }1579        completedWork.actualDuration = actualDuration;1580      }1581      if (returnFiber !== null) {1582        // Mark the parent fiber as incomplete1583        returnFiber.flags |= Incomplete;1584        returnFiber.subtreeFlags = NoFlags;1585        returnFiber.deletions = null;1586      }1587    }1588    const siblingFiber = completedWork.sibling;1589    if (siblingFiber !== null) {1590      // If there is more work to do in this returnFiber, do that next.1591      workInProgress = siblingFiber;1592      return;1593    }1594    // Otherwise, return to the parent1595    completedWork = returnFiber;1596    // Update the next thing we're working on in case something throws.1597    workInProgress = completedWork;1598  } while (completedWork !== null);1599  // We've reached the root.1600  if (workInProgressRootExitStatus === RootIncomplete) {1601    workInProgressRootExitStatus = RootCompleted;1602  }1603}1604function commitRoot(root) {1605  const renderPriorityLevel = getCurrentPriorityLevel();1606  runWithPriority(1607    ImmediateSchedulerPriority,1608    commitRootImpl.bind(null, root, renderPriorityLevel),1609  );1610  return null;1611}1612function commitRootImpl(root, renderPriorityLevel) {1613  do {1614    // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which1615    // means `flushPassiveEffects` will sometimes result in additional1616    // passive effects. So we need to keep flushing in a loop until there are1617    // no more pending effects.1618    // TODO: Might be better if `flushPassiveEffects` did not automatically1619    // flush synchronous work at the end, to avoid factoring hazards like this.1620    flushPassiveEffects();1621  } while (rootWithPendingPassiveEffects !== null);1622  flushRenderPhaseStrictModeWarningsInDEV();1623  invariant(1624    (executionContext & (RenderContext | CommitContext)) === NoContext,1625    'Should not already be working.',1626  );1627  const finishedWork = root.finishedWork;1628  const lanes = root.finishedLanes;1629  if (__DEV__) {1630    if (enableDebugTracing) {1631      logCommitStarted(lanes);1632    }1633  }1634  if (enableSchedulingProfiler) {1635    markCommitStarted(lanes);1636  }1637  // æ²¡æéè¦æ´æ°çFiberèç¹1638  if (finishedWork === null) {1639    if (__DEV__) {1640      if (enableDebugTracing) {1641        logCommitStopped();1642      }1643    }1644    if (enableSchedulingProfiler) {1645      markCommitStopped();1646    }1647    return null;1648  }1649  root.finishedWork = null;1650  root.finishedLanes = NoLanes;1651  invariant(1652    finishedWork !== root.current,1653    'Cannot commit the same tree as before. This error is likely caused by ' +1654      'a bug in React. Please file an issue.',1655  );1656  // commitRoot never returns a continuation; it always finishes synchronously.1657  // So we can clear these now to allow a new callback to be scheduled.1658  root.callbackNode = null;1659  // Update the first and last pending times on this root. The new first1660  // pending time is whatever is left on the root fiber.1661  // åå¹¶ææçéé1662  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);1663  markRootFinished(root, remainingLanes);1664  // Clear already finished discrete updates in case that a later call of1665  // `flushDiscreteUpdates` starts a useless render pass which may cancels1666  // a scheduled timeout.1667  if (rootsWithPendingDiscreteUpdates !== null) {1668    if (1669      !hasDiscreteLanes(remainingLanes) &&1670      rootsWithPendingDiscreteUpdates.has(root)1671    ) {1672      rootsWithPendingDiscreteUpdates.delete(root);1673    }1674  }1675  // è¯´ææ¬æ¬¡æ´æ°å·²ç»å®æäºï¼å°ä¸äºåééç½®1676  if (root === workInProgressRoot) {1677    // We can reset these now that they are finished.1678    workInProgressRoot = null;1679    workInProgress = null;1680    workInProgressRootRenderLanes = NoLanes;1681  } else {1682    // This indicates that the last root we worked on is not the same one that1683    // we're committing now. This most commonly happens when a suspended root1684    // times out.1685  }1686  // Check if there are any effects in the whole tree.1687  // TODO: This is left over from the effect list implementation, where we had1688  // to check for the existence of `firstEffect` to satsify Flow. I think the1689  // only other reason this optimization exists is because it affects profiling.1690  // Reconsider whether this is necessary.1691  const subtreeHasEffects =1692    (finishedWork.subtreeFlags &1693      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==1694    NoFlags;1695  const rootHasEffect =1696    (finishedWork.flags &1697      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==1698    NoFlags;1699    // æéè¦å¤ççå¯ä½ç¨1700  if (subtreeHasEffects || rootHasEffect) {1701    let previousLanePriority;1702    if (decoupleUpdatePriorityFromScheduler) {1703      previousLanePriority = getCurrentUpdateLanePriority();1704      setCurrentUpdateLanePriority(SyncLanePriority);1705    }1706    // è®¾ç½®æ§è¡ä¸ä¸æ1707    const prevExecutionContext = executionContext;1708    executionContext |= CommitContext;1709    const prevInteractions = pushInteractions(root);1710    // Reset this to null before calling lifecycles1711    ReactCurrentOwner.current = null;1712    // The commit phase is broken into several sub-phases. We do a separate pass1713    // of the effect list for each phase: all mutation effects come before all1714    // layout effects, and so on.1715    // The first phase a "before mutation" phase. We use this phase to read the1716    // state of the host tree right before we mutate it. This is where1717    // getSnapshotBeforeUpdate is called.1718    focusedInstanceHandle = prepareForCommit(root.containerInfo);1719    shouldFireAfterActiveInstanceBlur = false;1720    commitBeforeMutationEffects(finishedWork);1721    // We no longer need to track the active instance fiber1722    focusedInstanceHandle = null;1723    if (enableProfilerTimer) {1724      // Mark the current commit time to be shared by all Profilers in this1725      // batch. This enables them to be grouped later.1726      recordCommitTime();1727    }1728    // æDOMåç´ æ¸²æå°é¡µé¢ä¸1729    // The next phase is the mutation phase, where we mutate the host tree.1730    commitMutationEffects(finishedWork, root, renderPriorityLevel);1731    if (shouldFireAfterActiveInstanceBlur) {1732      afterActiveInstanceBlur();1733    }1734    resetAfterCommit(root.containerInfo);1735    // The work-in-progress tree is now the current tree. This must come after1736    // the mutation phase, so that the previous tree is still current during1737    // componentWillUnmount, but before the layout phase, so that the finished1738    // work is current during componentDidMount/Update.1739    // å¨æ¤ä¹åï¼root.current æåäºwork-in-progress tree1740    root.current = finishedWork;1741    // The next phase is the layout phase, where we call effects that read1742    // the host tree after it's been mutated. The idiomatic use case for this is1743    // layout, but class component lifecycles also fire here for legacy reasons.1744    if (__DEV__) {1745      if (enableDebugTracing) {1746        logLayoutEffectsStarted(lanes);1747      }1748    }1749    if (enableSchedulingProfiler) {1750      markLayoutEffectsStarted(lanes);1751    }1752    if (__DEV__) {1753      setCurrentDebugFiberInDEV(finishedWork);1754      invokeGuardedCallback(1755        null,1756        recursivelyCommitLayoutEffects,1757        null,1758        finishedWork,1759        root,1760      );1761      if (hasCaughtError()) {1762        const error = clearCaughtError();1763        captureCommitPhaseErrorOnRoot(finishedWork, finishedWork, error);1764      }1765      resetCurrentDebugFiberInDEV();1766    } else {1767      try {1768        recursivelyCommitLayoutEffects(finishedWork, root);1769      } catch (error) {1770        captureCommitPhaseErrorOnRoot(finishedWork, finishedWork, error);1771      }1772    }1773    if (__DEV__) {1774      if (enableDebugTracing) {1775        logLayoutEffectsStopped();1776      }1777    }1778    if (enableSchedulingProfiler) {1779      markLayoutEffectsStopped();1780    }1781    // If there are pending passive effects, schedule a callback to process them.1782    if (1783      (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||1784      (finishedWork.flags & PassiveMask) !== NoFlags1785    ) {1786      if (!rootDoesHavePassiveEffects) {1787        rootDoesHavePassiveEffects = true;1788        scheduleCallback(NormalSchedulerPriority, () => {1789          flushPassiveEffects();1790          return null;1791        });1792      }1793    }1794    // Tell Scheduler to yield at the end of the frame, so the browser has an1795    // opportunity to paint.1796    requestPaint();1797    if (enableSchedulerTracing) {1798      popInteractions(((prevInteractions: any): Set<Interaction>));1799    }1800    executionContext = prevExecutionContext;1801    if (decoupleUpdatePriorityFromScheduler && previousLanePriority != null) {1802      // Reset the priority to the previous non-sync value.1803      setCurrentUpdateLanePriority(previousLanePriority);1804    }1805  } else {1806    // No effects.1807    root.current = finishedWork;1808    // Measure these anyway so the flamegraph explicitly shows that there were1809    // no effects.1810    // TODO: Maybe there's a better way to report this.1811    if (enableProfilerTimer) {1812      recordCommitTime();1813    }1814  }1815  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;1816  if (rootDoesHavePassiveEffects) {1817    // This commit has passive effects. Stash a reference to them. But don't1818    // schedule a callback until after flushing layout work.1819    rootDoesHavePassiveEffects = false;1820    rootWithPendingPassiveEffects = root;1821    pendingPassiveEffectsLanes = lanes;1822    pendingPassiveEffectsRenderPriority = renderPriorityLevel;1823  }1824  // Read this again, since an effect might have updated it1825  remainingLanes = root.pendingLanes;1826  // Check if there's remaining work on this root1827  if (remainingLanes !== NoLanes) {1828    if (enableSchedulerTracing) {1829      if (spawnedWorkDuringRender !== null) {1830        const expirationTimes = spawnedWorkDuringRender;1831        spawnedWorkDuringRender = null;1832        for (let i = 0; i < expirationTimes.length; i++) {1833          scheduleInteractions(1834            root,1835            expirationTimes[i],1836            root.memoizedInteractions,1837          );1838        }1839      }1840      schedulePendingInteractions(root, remainingLanes);1841    }1842  } else {1843    // If there's no remaining work, we can clear the set of already failed1844    // error boundaries.1845    legacyErrorBoundariesThatAlreadyFailed = null;1846  }1847  if (__DEV__ && enableDoubleInvokingEffects) {1848    if (!rootDidHavePassiveEffects) {1849      commitDoubleInvokeEffectsInDEV(root.current, false);1850    }1851  }1852  if (enableSchedulerTracing) {1853    if (!rootDidHavePassiveEffects) {1854      // If there are no passive effects, then we can complete the pending interactions.1855      // Otherwise, we'll wait until after the passive effects are flushed.1856      // Wait to do this until after remaining work has been scheduled,1857      // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.1858      finishPendingInteractions(root, lanes);1859    }1860  }1861  if (remainingLanes === SyncLane) {1862    // Count the number of times the root synchronously re-renders without1863    // finishing. If there are too many, it indicates an infinite update loop.1864    if (root === rootWithNestedUpdates) {1865      nestedUpdateCount++;1866    } else {1867      nestedUpdateCount = 0;1868      rootWithNestedUpdates = root;1869    }1870  } else {1871    nestedUpdateCount = 0;1872  }1873  onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);1874  if (__DEV__) {1875    onCommitRootTestSelector();1876  }1877  // Always call this before exiting `commitRoot`, to ensure that any1878  // additional work on this root is scheduled.1879  ensureRootIsScheduled(root, now());1880  if (hasUncaughtError) {1881    hasUncaughtError = false;1882    const error = firstUncaughtError;1883    firstUncaughtError = null;1884    throw error;1885  }1886  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {1887    if (__DEV__) {1888      if (enableDebugTracing) {1889        logCommitStopped();1890      }1891    }1892    if (enableSchedulingProfiler) {1893      markCommitStopped();1894    }1895    // This is a legacy edge case. We just committed the initial mount of1896    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired1897    // synchronously, but layout updates should be deferred until the end1898    // of the batch.1899    return null;1900  }1901  // If layout work was scheduled, flush it now.1902  flushSyncCallbackQueue();1903  if (__DEV__) {1904    if (enableDebugTracing) {1905      logCommitStopped();1906    }1907  }1908  if (enableSchedulingProfiler) {1909    markCommitStopped();1910  }1911  return null;1912}1913function commitBeforeMutationEffects(firstChild: Fiber) {1914  let fiber = firstChild;1915  while (fiber !== null) {1916    // å¤çéè¦å é¤çfiber autoFocusãblur é»è¾ã1917    if (fiber.deletions !== null) {1918      commitBeforeMutationEffectsDeletions(fiber.deletions);1919    }1920    // éå½è°ç¨å¤çåèç¹1921    if (fiber.child !== null) {1922      const primarySubtreeFlags = fiber.subtreeFlags & BeforeMutationMask;1923      if (primarySubtreeFlags !== NoFlags) {1924        commitBeforeMutationEffects(fiber.child);1925      }1926    }1927    if (__DEV__) {1928      setCurrentDebugFiberInDEV(fiber);1929      invokeGuardedCallback(null, commitBeforeMutationEffectsImpl, null, fiber);1930      if (hasCaughtError()) {1931        const error = clearCaughtError();1932        captureCommitPhaseError(fiber, fiber.return, error);1933      }1934      resetCurrentDebugFiberInDEV();1935    } else {1936      try {1937        // è°ç¨ getSnapshotBeforeUpdate çå½å¨æ1938        // å¼æ¥è°åº¦useEffect1939        commitBeforeMutationEffectsImpl(fiber);1940      } catch (error) {1941        captureCommitPhaseError(fiber, fiber.return, error);1942      }1943    }1944    // è¿ååå¼èç¹ï¼æ¥çå¾ªç¯1945    fiber = fiber.sibling;1946  }1947}1948function commitBeforeMutationEffectsImpl(fiber: Fiber) {1949  const current = fiber.alternate;1950  const flags = fiber.flags;1951  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {1952    // Check to see if the focused element was inside of a hidden (Suspense) subtree.1953    // TODO: Move this out of the hot path using a dedicated effect tag.1954    if (1955      fiber.tag === SuspenseComponent &&1956      isSuspenseBoundaryBeingHidden(current, fiber) &&1957      doesFiberContain(fiber, focusedInstanceHandle)1958    ) {1959      shouldFireAfterActiveInstanceBlur = true;1960      beforeActiveInstanceBlur();1961    }1962  }1963  if ((flags & Snapshot) !== NoFlags) {1964    setCurrentDebugFiberInDEV(fiber);1965    // è°ç¨ getSnapshotBeforeUpdate çå½å¨æ1966    commitBeforeMutationEffectOnFiber(current, fiber);1967    resetCurrentDebugFiberInDEV();1968  }1969  // è°åº¦useEffect1970  if ((flags & Passive) !== NoFlags) {1971    // If there are passive effects, schedule a callback to flush at1972    // the earliest opportunity.1973    if (!rootDoesHavePassiveEffects) {1974      rootDoesHavePassiveEffects = true;1975      scheduleCallback(NormalSchedulerPriority, () => {1976        flushPassiveEffects();1977        return null;1978      });1979    }1980  }1981}1982function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {1983  for (let i = 0; i < deletions.length; i++) {1984    const fiber = deletions[i];1985    // TODO (effects) It would be nice to avoid calling doesFiberContain()1986    // Maybe we can repurpose one of the subtreeFlags positions for this instead?1987    // Use it to store which part of the tree the focused instance is in?1988    // This assumes we can safely determine that instance during the "render" phase.1989    if (doesFiberContain(fiber, ((focusedInstanceHandle: any): Fiber))) {1990      shouldFireAfterActiveInstanceBlur = true;1991      beforeActiveInstanceBlur();1992    }1993  }1994}1995function commitMutationEffects(1996  firstChild: Fiber,1997  root: FiberRoot,1998  renderPriorityLevel: ReactPriorityLevel,1999) {2000  let fiber = firstChild;2001  while (fiber !== null) {2002    const deletions = fiber.deletions;2003    if (deletions !== null) {2004      commitMutationEffectsDeletions(2005        deletions,2006        fiber,2007        root,2008        renderPriorityLevel,2009      );2010    }2011    if (fiber.child !== null) {2012      const mutationFlags = fiber.subtreeFlags & MutationMask;2013      if (mutationFlags !== NoFlags) {2014        commitMutationEffects(fiber.child, root, renderPriorityLevel);2015      }2016    }2017    if (__DEV__) {2018      setCurrentDebugFiberInDEV(fiber);2019      invokeGuardedCallback(2020        null,2021        commitMutationEffectsImpl,2022        null,2023        fiber,2024        root,2025        renderPriorityLevel,2026      );2027      if (hasCaughtError()) {2028        const error = clearCaughtError();2029        captureCommitPhaseError(fiber, fiber.return, error);2030      }2031      resetCurrentDebugFiberInDEV();2032    } else {2033      try {2034        commitMutationEffectsImpl(fiber, root, renderPriorityLevel);2035      } catch (error) {2036        captureCommitPhaseError(fiber, fiber.return, error);2037      }2038    }2039    fiber = fiber.sibling;2040  }2041}2042function commitMutationEffectsImpl(2043  fiber: Fiber,2044  root: FiberRoot,2045  renderPriorityLevel,2046) {2047  const flags = fiber.flags;2048  if (flags & ContentReset) {2049    commitResetTextContent(fiber);2050  }2051  if (flags & Ref) {2052    const current = fiber.alternate;2053    if (current !== null) {2054      commitDetachRef(current);2055    }2056    if (enableScopeAPI) {2057      // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.2058      if (fiber.tag === ScopeComponent) {2059        commitAttachRef(fiber);2060      }2061    }2062  }2063  // The following switch statement is only concerned about placement,2064  // updates, and deletions. To avoid needing to add a case for every possible2065  // bitmap value, we remove the secondary effects from the effect tag and2066  // switch on that value.2067  const primaryFlags = flags & (Placement | Update | Hydrating);2068  switch (primaryFlags) {2069    case Placement: {2070      commitPlacement(fiber);2071      // Clear the "placement" from effect tag so that we know that this is2072      // inserted, before any life-cycles like componentDidMount gets called.2073      // TODO: findDOMNode doesn't rely on this any more but isMounted does2074      // and isMounted is deprecated anyway so we should be able to kill this.2075      fiber.flags &= ~Placement;2076      break;2077    }2078    case PlacementAndUpdate: {2079      // Placement2080      commitPlacement(fiber);2081      // Clear the "placement" from effect tag so that we know that this is2082      // inserted, before any life-cycles like componentDidMount gets called.2083      fiber.flags &= ~Placement;2084      // Update2085      const current = fiber.alternate;2086      commitWork(current, fiber);2087      break;2088    }2089    case Hydrating: {2090      fiber.flags &= ~Hydrating;2091      break;2092    }2093    case HydratingAndUpdate: {2094      fiber.flags &= ~Hydrating;2095      // Update2096      const current = fiber.alternate;2097      commitWork(current, fiber);2098      break;2099    }2100    case Update: {2101      const current = fiber.alternate;2102      commitWork(current, fiber);2103      break;2104    }2105  }2106}2107function commitMutationEffectsDeletions(2108  deletions: Array<Fiber>,2109  nearestMountedAncestor: Fiber,2110  root: FiberRoot,2111  renderPriorityLevel,2112) {2113  for (let i = 0; i < deletions.length; i++) {2114    const childToDelete = deletions[i];2115    if (__DEV__) {2116      invokeGuardedCallback(2117        null,2118        commitDeletion,2119        null,2120        root,2121        childToDelete,2122        nearestMountedAncestor,2123        renderPriorityLevel,2124      );2125      if (hasCaughtError()) {2126        const error = clearCaughtError();2127        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);2128      }2129    } else {2130      try {2131        commitDeletion(2132          root,2133          childToDelete,2134          nearestMountedAncestor,2135          renderPriorityLevel,2136        );2137      } catch (error) {2138        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);2139      }2140    }2141  }2142}2143export function schedulePassiveEffectCallback() {2144  if (!rootDoesHavePassiveEffects) {2145    rootDoesHavePassiveEffects = true;2146    scheduleCallback(NormalSchedulerPriority, () => {2147      flushPassiveEffects();2148      return null;2149    });2150  }2151}2152export function flushPassiveEffects(): boolean {2153  // Returns whether passive effects were flushed.2154  if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {2155    const priorityLevel =2156      pendingPassiveEffectsRenderPriority > NormalSchedulerPriority2157        ? NormalSchedulerPriority2158        : pendingPassiveEffectsRenderPriority;2159    pendingPassiveEffectsRenderPriority = NoSchedulerPriority;2160    if (decoupleUpdatePriorityFromScheduler) {2161      const previousLanePriority = getCurrentUpdateLanePriority();2162      try {2163        setCurrentUpdateLanePriority(2164          schedulerPriorityToLanePriority(priorityLevel),2165        );2166        return runWithPriority(priorityLevel, flushPassiveEffectsImpl);2167      } finally {2168        setCurrentUpdateLanePriority(previousLanePriority);2169      }2170    } else {2171      return runWithPriority(priorityLevel, flushPassiveEffectsImpl);2172    }2173  }2174  return false;2175}2176function flushPassiveMountEffects(root, firstChild: Fiber): void {2177  let fiber = firstChild;2178  while (fiber !== null) {2179    let prevProfilerOnStack = null;2180    if (enableProfilerTimer && enableProfilerCommitHooks) {2181      if (fiber.tag === Profiler) {2182        prevProfilerOnStack = nearestProfilerOnStack;2183        nearestProfilerOnStack = fiber;2184      }2185    }2186    const primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;2187    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {2188      flushPassiveMountEffects(root, fiber.child);2189    }2190    if ((fiber.flags & Passive) !== NoFlags) {2191      if (__DEV__) {2192        setCurrentDebugFiberInDEV(fiber);2193        invokeGuardedCallback(2194          null,2195          commitPassiveMountOnFiber,2196          null,2197          root,2198          fiber,2199        );2200        if (hasCaughtError()) {2201          const error = clearCaughtError();2202          captureCommitPhaseError(fiber, fiber.return, error);2203        }2204        resetCurrentDebugFiberInDEV();2205      } else {2206        try {2207          commitPassiveMountOnFiber(root, fiber);2208        } catch (error) {2209          captureCommitPhaseError(fiber, fiber.return, error);2210        }2211      }2212    }2213    if (enableProfilerTimer && enableProfilerCommitHooks) {2214      if (fiber.tag === Profiler) {2215        // Bubble times to the next nearest ancestor Profiler.2216        // After we process that Profiler, we'll bubble further up.2217        if (prevProfilerOnStack !== null) {2218          prevProfilerOnStack.stateNode.passiveEffectDuration +=2219            fiber.stateNode.passiveEffectDuration;2220        }2221        nearestProfilerOnStack = prevProfilerOnStack;2222      }2223    }2224    fiber = fiber.sibling;2225  }2226}2227function flushPassiveUnmountEffects(firstChild: Fiber): void {2228  let fiber = firstChild;2229  while (fiber !== null) {2230    const deletions = fiber.deletions;2231    if (deletions !== null) {2232      for (let i = 0; i < deletions.length; i++) {2233        const fiberToDelete = deletions[i];2234        flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, fiber);2235        // Now that passive effects have been processed, it's safe to detach lingering pointers.2236        detachFiberAfterEffects(fiberToDelete);2237      }2238    }2239    const child = fiber.child;2240    if (child !== null) {2241      // If any children have passive effects then traverse the subtree.2242      // Note that this requires checking subtreeFlags of the current Fiber,2243      // rather than the subtreeFlags/effectsTag of the first child,2244      // since that would not cover passive effects in siblings.2245      const passiveFlags = fiber.subtreeFlags & PassiveMask;2246      if (passiveFlags !== NoFlags) {2247        flushPassiveUnmountEffects(child);2248      }2249    }2250    const primaryFlags = fiber.flags & Passive;2251    if (primaryFlags !== NoFlags) {2252      setCurrentDebugFiberInDEV(fiber);2253      commitPassiveUnmountOnFiber(fiber);2254      resetCurrentDebugFiberInDEV();2255    }2256    fiber = fiber.sibling;2257  }2258}2259function flushPassiveUnmountEffectsInsideOfDeletedTree(2260  fiberToDelete: Fiber,2261  nearestMountedAncestor: Fiber,2262): void {2263  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {2264    // If any children have passive effects then traverse the subtree.2265    // Note that this requires checking subtreeFlags of the current Fiber,2266    // rather than the subtreeFlags/effectsTag of the first child,2267    // since that would not cover passive effects in siblings.2268    let child = fiberToDelete.child;2269    while (child !== null) {2270      flushPassiveUnmountEffectsInsideOfDeletedTree(2271        child,2272        nearestMountedAncestor,2273      );2274      child = child.sibling;2275    }2276  }2277  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {2278    setCurrentDebugFiberInDEV(fiberToDelete);2279    commitPassiveUnmountInsideDeletedTreeOnFiber(2280      fiberToDelete,2281      nearestMountedAncestor,2282    );2283    resetCurrentDebugFiberInDEV();2284  }2285}2286function flushPassiveEffectsImpl() {2287  if (rootWithPendingPassiveEffects === null) {2288    return false;2289  }2290  const root = rootWithPendingPassiveEffects;2291  const lanes = pendingPassiveEffectsLanes;2292  rootWithPendingPassiveEffects = null;2293  pendingPassiveEffectsLanes = NoLanes;2294  invariant(2295    (executionContext & (RenderContext | CommitContext)) === NoContext,2296    'Cannot flush passive effects while already rendering.',2297  );2298  if (__DEV__) {2299    if (enableDebugTracing) {2300      logPassiveEffectsStarted(lanes);2301    }2302  }2303  if (enableSchedulingProfiler) {2304    markPassiveEffectsStarted(lanes);2305  }2306  if (__DEV__) {2307    isFlushingPassiveEffects = true;2308  }2309  const prevExecutionContext = executionContext;2310  executionContext |= CommitContext;2311  const prevInteractions = pushInteractions(root);2312  // It's important that ALL pending passive effect destroy functions are called2313  // before ANY passive effect create functions are called.2314  // Otherwise effects in sibling components might interfere with each other.2315  // e.g. a destroy function in one component may unintentionally override a ref2316  // value set by a create function in another component.2317  // Layout effects have the same constraint.2318  flushPassiveUnmountEffects(root.current);2319  flushPassiveMountEffects(root, root.current);2320  if (__DEV__) {2321    if (enableDebugTracing) {2322      logPassiveEffectsStopped();2323    }2324  }2325  if (enableSchedulingProfiler) {2326    markPassiveEffectsStopped();2327  }2328  if (__DEV__ && enableDoubleInvokingEffects) {2329    commitDoubleInvokeEffectsInDEV(root.current, true);2330  }2331  if (__DEV__) {2332    isFlushingPassiveEffects = false;2333  }2334  if (enableSchedulerTracing) {2335    popInteractions(((prevInteractions: any): Set<Interaction>));2336    finishPendingInteractions(root, lanes);2337  }2338  executionContext = prevExecutionContext;2339  flushSyncCallbackQueue();2340  // If additional passive effects were scheduled, increment a counter. If this2341  // exceeds the limit, we'll fire a warning.2342  nestedPassiveUpdateCount =2343    rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;2344  return true;2345}2346export function isAlreadyFailedLegacyErrorBoundary(instance: mixed): boolean {2347  return (2348    legacyErrorBoundariesThatAlreadyFailed !== null &&2349    legacyErrorBoundariesThatAlreadyFailed.has(instance)2350  );2351}2352export function markLegacyErrorBoundaryAsFailed(instance: mixed) {2353  if (legacyErrorBoundariesThatAlreadyFailed === null) {2354    legacyErrorBoundariesThatAlreadyFailed = new Set([instance]);2355  } else {2356    legacyErrorBoundariesThatAlreadyFailed.add(instance);2357  }2358}2359function prepareToThrowUncaughtError(error: mixed) {2360  if (!hasUncaughtError) {2361    hasUncaughtError = true;2362    firstUncaughtError = error;2363  }2364}2365export const onUncaughtError = prepareToThrowUncaughtError;2366function captureCommitPhaseErrorOnRoot(2367  rootFiber: Fiber,2368  sourceFiber: Fiber,2369  error: mixed,2370) {2371  const errorInfo = createCapturedValue(error, sourceFiber);2372  const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));2373  enqueueUpdate(rootFiber, update);2374  const eventTime = requestEventTime();2375  const root = markUpdateLaneFromFiberToRoot(rootFiber, (SyncLane: Lane));2376  if (root !== null) {2377    markRootUpdated(root, SyncLane, eventTime);2378    ensureRootIsScheduled(root, eventTime);2379    schedulePendingInteractions(root, SyncLane);2380  }2381}2382export function captureCommitPhaseError(2383  sourceFiber: Fiber,2384  nearestMountedAncestor: Fiber | null,2385  error: mixed,2386) {2387  if (sourceFiber.tag === HostRoot) {2388    // Error was thrown at the root. There is no parent, so the root2389    // itself should capture it.2390    captureCommitPhaseErrorOnRoot(sourceFiber, sourceFiber, error);2391    return;2392  }2393  let fiber = null;2394  if (skipUnmountedBoundaries) {2395    fiber = nearestMountedAncestor;2396  } else {2397    fiber = sourceFiber.return;2398  }2399  while (fiber !== null) {2400    if (fiber.tag === HostRoot) {2401      captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);2402      return;2403    } else if (fiber.tag === ClassComponent) {2404      const ctor = fiber.type;2405      const instance = fiber.stateNode;2406      if (2407        typeof ctor.getDerivedStateFromError === 'function' ||2408        (typeof instance.componentDidCatch === 'function' &&2409          !isAlreadyFailedLegacyErrorBoundary(instance))2410      ) {2411        const errorInfo = createCapturedValue(error, sourceFiber);2412        const update = createClassErrorUpdate(2413          fiber,2414          errorInfo,2415          (SyncLane: Lane),2416        );2417        enqueueUpdate(fiber, update);2418        const eventTime = requestEventTime();2419        const root = markUpdateLaneFromFiberToRoot(fiber, (SyncLane: Lane));2420        if (root !== null) {2421          markRootUpdated(root, SyncLane, eventTime);2422          ensureRootIsScheduled(root, eventTime);2423          schedulePendingInteractions(root, SyncLane);2424        }2425        return;2426      }2427    }2428    fiber = fiber.return;2429  }2430}2431export function pingSuspendedRoot(2432  root: FiberRoot,2433  wakeable: Wakeable,2434  pingedLanes: Lanes,2435) {2436  const pingCache = root.pingCache;2437  if (pingCache !== null) {2438    // The wakeable resolved, so we no longer need to memoize, because it will2439    // never be thrown again.2440    pingCache.delete(wakeable);2441  }2442  const eventTime = requestEventTime();2443  markRootPinged(root, pingedLanes, eventTime);2444  if (2445    workInProgressRoot === root &&2446    isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)2447  ) {2448    // Received a ping at the same priority level at which we're currently2449    // rendering. We might want to restart this render. This should mirror2450    // the logic of whether or not a root suspends once it completes.2451    // TODO: If we're rendering sync either due to Sync, Batched or expired,2452    // we should probably never restart.2453    // If we're suspended with delay, or if it's a retry, we'll always suspend2454    // so we can always restart.2455    if (2456      workInProgressRootExitStatus === RootSuspendedWithDelay ||2457      (workInProgressRootExitStatus === RootSuspended &&2458        includesOnlyRetries(workInProgressRootRenderLanes) &&2459        now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS)2460    ) {2461      // Restart from the root.2462      prepareFreshStack(root, NoLanes);2463    } else {2464      // Even though we can't restart right now, we might get an2465      // opportunity later. So we mark this render as having a ping.2466      workInProgressRootPingedLanes = mergeLanes(2467        workInProgressRootPingedLanes,2468        pingedLanes,2469      );2470    }2471  }2472  ensureRootIsScheduled(root, eventTime);2473  schedulePendingInteractions(root, pingedLanes);2474}2475function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {2476  // The boundary fiber (a Suspense component or SuspenseList component)2477  // previously was rendered in its fallback state. One of the promises that2478  // suspended it has resolved, which means at least part of the tree was2479  // likely unblocked. Try rendering again, at a new expiration time.2480  if (retryLane === NoLane) {2481    retryLane = requestRetryLane(boundaryFiber);2482  }2483  // TODO: Special case idle priority?2484  const eventTime = requestEventTime();2485  const root = markUpdateLaneFromFiberToRoot(boundaryFiber, retryLane);2486  if (root !== null) {2487    markRootUpdated(root, retryLane, eventTime);2488    ensureRootIsScheduled(root, eventTime);2489    schedulePendingInteractions(root, retryLane);2490  }2491}2492export function retryDehydratedSuspenseBoundary(boundaryFiber: Fiber) {2493  const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;2494  let retryLane = NoLane;2495  if (suspenseState !== null) {2496    retryLane = suspenseState.retryLane;2497  }2498  retryTimedOutBoundary(boundaryFiber, retryLane);2499}2500export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {2501  let retryLane = NoLane; // Default2502  let retryCache: WeakSet<Wakeable> | Set<Wakeable> | null;2503  if (enableSuspenseServerRenderer) {2504    switch (boundaryFiber.tag) {2505      case SuspenseComponent:2506        retryCache = boundaryFiber.stateNode;2507        const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;2508        if (suspenseState !== null) {2509          retryLane = suspenseState.retryLane;2510        }2511        break;2512      case SuspenseListComponent:2513        retryCache = boundaryFiber.stateNode;2514        break;2515      default:2516        invariant(2517          false,2518          'Pinged unknown suspense boundary type. ' +2519            'This is probably a bug in React.',2520        );2521    }2522  } else {2523    retryCache = boundaryFiber.stateNode;2524  }2525  if (retryCache !== null) {2526    // The wakeable resolved, so we no longer need to memoize, because it will2527    // never be thrown again.2528    retryCache.delete(wakeable);2529  }2530  retryTimedOutBoundary(boundaryFiber, retryLane);2531}2532// Computes the next Just Noticeable Difference (JND) boundary.2533// The theory is that a person can't tell the difference between small differences in time.2534// Therefore, if we wait a bit longer than necessary that won't translate to a noticeable2535// difference in the experience. However, waiting for longer might mean that we can avoid2536// showing an intermediate loading state. The longer we have already waited, the harder it2537// is to tell small differences in time. Therefore, the longer we've already waited,2538// the longer we can wait additionally. At some point we have to give up though.2539// We pick a train model where the next boundary commits at a consistent schedule.2540// These particular numbers are vague estimates. We expect to adjust them based on research.2541function jnd(timeElapsed: number) {2542  return timeElapsed < 1202543    ? 1202544    : timeElapsed < 4802545    ? 4802546    : timeElapsed < 10802547    ? 10802548    : timeElapsed < 19202549    ? 19202550    : timeElapsed < 30002551    ? 30002552    : timeElapsed < 43202553    ? 43202554    : ceil(timeElapsed / 1960) * 1960;2555}2556function checkForNestedUpdates() {2557  if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {2558    nestedUpdateCount = 0;2559    rootWithNestedUpdates = null;2560    invariant(2561      false,2562      'Maximum update depth exceeded. This can happen when a component ' +2563        'repeatedly calls setState inside componentWillUpdate or ' +2564        'componentDidUpdate. React limits the number of nested updates to ' +2565        'prevent infinite loops.',2566    );2567  }2568  if (__DEV__) {2569    if (nestedPassiveUpdateCount > NESTED_PASSIVE_UPDATE_LIMIT) {2570      nestedPassiveUpdateCount = 0;2571      console.error(2572        'Maximum update depth exceeded. This can happen when a component ' +2573          "calls setState inside useEffect, but useEffect either doesn't " +2574          'have a dependency array, or one of the dependencies changes on ' +2575          'every render.',2576      );2577    }2578  }2579}2580function flushRenderPhaseStrictModeWarningsInDEV() {2581  if (__DEV__) {2582    ReactStrictModeWarnings.flushLegacyContextWarning();2583    if (warnAboutDeprecatedLifecycles) {2584      ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();2585    }2586  }2587}2588function commitDoubleInvokeEffectsInDEV(2589  fiber: Fiber,2590  hasPassiveEffects: boolean,2591) {2592  if (__DEV__ && enableDoubleInvokingEffects) {2593    setCurrentDebugFiberInDEV(fiber);2594    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);2595    if (hasPassiveEffects) {2596      invokeEffectsInDev(2597        fiber,2598        MountPassiveDev,2599        invokePassiveEffectUnmountInDEV,2600      );2601    }2602    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);2603    if (hasPassiveEffects) {2604      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);2605    }2606    resetCurrentDebugFiberInDEV();2607  }2608}2609function invokeEffectsInDev(2610  firstChild: Fiber,2611  fiberFlags: Flags,2612  invokeEffectFn: (fiber: Fiber) => void,2613): void {2614  if (__DEV__ && enableDoubleInvokingEffects) {2615    let fiber = firstChild;2616    while (fiber !== null) {2617      if (fiber.child !== null) {2618        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;2619        if (primarySubtreeFlag !== NoFlags) {2620          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);2621        }2622      }2623      if ((fiber.flags & fiberFlags) !== NoFlags) {2624        invokeEffectFn(fiber);2625      }2626      fiber = fiber.sibling;2627    }2628  }2629}2630let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;2631function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {2632  if (__DEV__) {2633    if ((executionContext & RenderContext) !== NoContext) {2634      // We let the other warning about render phase updates deal with this one.2635      return;2636    }2637    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {2638      return;2639    }2640    const tag = fiber.tag;2641    if (2642      tag !== IndeterminateComponent &&2643      tag !== HostRoot &&2644      tag !== ClassComponent &&2645      tag !== FunctionComponent &&2646      tag !== ForwardRef &&2647      tag !== MemoComponent &&2648      tag !== SimpleMemoComponent &&2649      tag !== Block2650    ) {2651      // Only warn for user-defined components, not internal ones like Suspense.2652      return;2653    }2654    // We show the whole stack but dedupe on the top component's name because2655    // the problematic code almost always lies inside that component.2656    const componentName = getComponentName(fiber.type) || 'ReactComponent';2657    if (didWarnStateUpdateForNotYetMountedComponent !== null) {2658      if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {2659        return;2660      }2661      didWarnStateUpdateForNotYetMountedComponent.add(componentName);2662    } else {2663      didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]);2664    }2665    const previousFiber = ReactCurrentFiberCurrent;2666    try {2667      setCurrentDebugFiberInDEV(fiber);2668      console.error(2669        "Can't perform a React state update on a component that hasn't mounted yet. " +2670          'This indicates that you have a side-effect in your render function that ' +2671          'asynchronously later calls tries to update the component. Move this work to ' +2672          'useEffect instead.',2673      );2674    } finally {2675      if (previousFiber) {2676        setCurrentDebugFiberInDEV(fiber);2677      } else {2678        resetCurrentDebugFiberInDEV();2679      }2680    }2681  }2682}2683let didWarnStateUpdateForUnmountedComponent: Set<string> | null = null;2684function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {2685  if (__DEV__) {2686    const tag = fiber.tag;2687    if (2688      tag !== HostRoot &&2689      tag !== ClassComponent &&2690      tag !== FunctionComponent &&2691      tag !== ForwardRef &&2692      tag !== MemoComponent &&2693      tag !== SimpleMemoComponent &&2694      tag !== Block2695    ) {2696      // Only warn for user-defined components, not internal ones like Suspense.2697      return;2698    }2699    if ((fiber.flags & PassiveStatic) !== NoFlags) {2700      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);2701      if (updateQueue !== null) {2702        const lastEffect = updateQueue.lastEffect;2703        if (lastEffect !== null) {2704          const firstEffect = lastEffect.next;2705          let effect = firstEffect;2706          do {2707            if (effect.destroy !== undefined) {2708              if ((effect.tag & HookPassive) !== NoHookEffect) {2709                return;2710              }2711            }2712            effect = effect.next;2713          } while (effect !== firstEffect);2714        }2715      }2716    }2717    // We show the whole stack but dedupe on the top component's name because2718    // the problematic code almost always lies inside that component.2719    const componentName = getComponentName(fiber.type) || 'ReactComponent';2720    if (didWarnStateUpdateForUnmountedComponent !== null) {2721      if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {2722        return;2723      }2724      didWarnStateUpdateForUnmountedComponent.add(componentName);2725    } else {2726      didWarnStateUpdateForUnmountedComponent = new Set([componentName]);2727    }2728    if (isFlushingPassiveEffects) {2729      // Do not warn if we are currently flushing passive effects!2730      //2731      // React can't directly detect a memory leak, but there are some clues that warn about one.2732      // One of these clues is when an unmounted React component tries to update its state.2733      // For example, if a component forgets to remove an event listener when unmounting,2734      // that listener may be called later and try to update state,2735      // at which point React would warn about the potential leak.2736      //2737      // Warning signals are the most useful when they're strong.2738      // (So we should avoid false positive warnings.)2739      // Updating state from within an effect cleanup function is sometimes a necessary pattern, e.g.:2740      // 1. Updating an ancestor that a component had registered itself with on mount.2741      // 2. Resetting state when a component is hidden after going offscreen.2742    } else {2743      const previousFiber = ReactCurrentFiberCurrent;2744      try {2745        setCurrentDebugFiberInDEV(fiber);2746        console.error(2747          "Can't perform a React state update on an unmounted component. This " +2748            'is a no-op, but it indicates a memory leak in your application. To ' +2749            'fix, cancel all subscriptions and asynchronous tasks in %s.',2750          tag === ClassComponent2751            ? 'the componentWillUnmount method'2752            : 'a useEffect cleanup function',2753        );2754      } finally {2755        if (previousFiber) {2756          setCurrentDebugFiberInDEV(fiber);2757        } else {2758          resetCurrentDebugFiberInDEV();2759        }2760      }2761    }2762  }2763}2764let beginWork;2765if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {2766  const dummyFiber = null;2767  beginWork = (current, unitOfWork, lanes) => {2768    // If a component throws an error, we replay it again in a synchronously2769    // dispatched event, so that the debugger will treat it as an uncaught2770    // error See ReactErrorUtils for more information.2771    // Before entering the begin phase, copy the work-in-progress onto a dummy2772    // fiber. If beginWork throws, we'll use this to reset the state.2773    const originalWorkInProgressCopy = assignFiberPropertiesInDEV(2774      dummyFiber,2775      unitOfWork,2776    );2777    try {2778      return originalBeginWork(current, unitOfWork, lanes);2779    } catch (originalError) {2780      if (2781        originalError !== null &&2782        typeof originalError === 'object' &&2783        typeof originalError.then === 'function'2784      ) {2785        // Don't replay promises. Treat everything else like an error.2786        throw originalError;2787      }2788      // Keep this code in sync with handleError; any changes here must have2789      // corresponding changes there.2790      resetContextDependencies();2791      resetHooksAfterThrow();2792      // Don't reset current debug fiber, since we're about to work on the2793      // same fiber again.2794      // Unwind the failed stack frame2795      unwindInterruptedWork(unitOfWork);2796      // Restore the original properties of the fiber.2797      assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);2798      if (enableProfilerTimer && unitOfWork.mode & ProfileMode) {2799        // Reset the profiler timer.2800        startProfilerTimer(unitOfWork);2801      }2802      // Run beginWork again.2803      invokeGuardedCallback(2804        null,2805        originalBeginWork,2806        null,2807        current,2808        unitOfWork,2809        lanes,2810      );2811      if (hasCaughtError()) {2812        const replayError = clearCaughtError();2813        // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.2814        // Rethrow this error instead of the original one.2815        throw replayError;2816      } else {2817        // This branch is reachable if the render phase is impure.2818        throw originalError;2819      }2820    }2821  };2822} else {2823  beginWork = originalBeginWork;2824}2825let didWarnAboutUpdateInRender = false;2826let didWarnAboutUpdateInRenderForAnotherComponent;2827if (__DEV__) {2828  didWarnAboutUpdateInRenderForAnotherComponent = new Set();2829}2830function warnAboutRenderPhaseUpdatesInDEV(fiber) {2831  if (__DEV__) {2832    if (2833      ReactCurrentDebugFiberIsRenderingInDEV &&2834      (executionContext & RenderContext) !== NoContext &&2835      !getIsUpdatingOpaqueValueInRenderPhaseInDEV()2836    ) {2837      switch (fiber.tag) {2838        case FunctionComponent:2839        case ForwardRef:2840        case SimpleMemoComponent: {2841          const renderingComponentName =2842            (workInProgress && getComponentName(workInProgress.type)) ||2843            'Unknown';2844          // Dedupe by the rendering component because it's the one that needs to be fixed.2845          const dedupeKey = renderingComponentName;2846          if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {2847            didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);2848            const setStateComponentName =2849              getComponentName(fiber.type) || 'Unknown';2850            console.error(2851              'Cannot update a component (`%s`) while rendering a ' +2852                'different component (`%s`). To locate the bad setState() call inside `%s`, ' +2853                'follow the stack trace as described in https://reactjs.org/link/setstate-in-render',2854              setStateComponentName,2855              renderingComponentName,2856              renderingComponentName,2857            );2858          }2859          break;2860        }2861        case ClassComponent: {2862          if (!didWarnAboutUpdateInRender) {2863            console.error(2864              'Cannot update during an existing state transition (such as ' +2865                'within `render`). Render methods should be a pure ' +2866                'function of props and state.',2867            );2868            didWarnAboutUpdateInRender = true;2869          }2870          break;2871        }2872      }2873    }2874  }2875}2876// a 'shared' variable that changes when act() opens/closes in tests.2877export const IsThisRendererActing = {current: (false: boolean)};2878export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {2879  if (__DEV__) {2880    if (2881      warnsIfNotActing === true &&2882      IsSomeRendererActing.current === true &&2883      IsThisRendererActing.current !== true2884    ) {2885      const previousFiber = ReactCurrentFiberCurrent;2886      try {2887        setCurrentDebugFiberInDEV(fiber);2888        console.error(2889          "It looks like you're using the wrong act() around your test interactions.\n" +2890            'Be sure to use the matching version of act() corresponding to your renderer:\n\n' +2891            '// for react-dom:\n' +2892            // Break up imports to avoid accidentally parsing them as dependencies.2893            'import {act} fr' +2894            "om 'react-dom/test-utils';\n" +2895            '// ...\n' +2896            'act(() => ...);\n\n' +2897            '// for react-test-renderer:\n' +2898            // Break up imports to avoid accidentally parsing them as dependencies.2899            'import TestRenderer fr' +2900            "om react-test-renderer';\n" +2901            'const {act} = TestRenderer;\n' +2902            '// ...\n' +2903            'act(() => ...);',2904        );2905      } finally {2906        if (previousFiber) {2907          setCurrentDebugFiberInDEV(fiber);2908        } else {2909          resetCurrentDebugFiberInDEV();2910        }2911      }2912    }2913  }2914}2915export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {2916  if (__DEV__) {2917    if (2918      warnsIfNotActing === true &&2919      (fiber.mode & StrictMode) !== NoMode &&2920      IsSomeRendererActing.current === false &&2921      IsThisRendererActing.current === false2922    ) {2923      console.error(2924        'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +2925          'When testing, code that causes React state updates should be ' +2926          'wrapped into act(...):\n\n' +2927          'act(() => {\n' +2928          '  /* fire events that update state */\n' +2929          '});\n' +2930          '/* assert on the output */\n\n' +2931          "This ensures that you're testing the behavior the user would see " +2932          'in the browser.' +2933          ' Learn more at https://reactjs.org/link/wrap-tests-with-act',2934        getComponentName(fiber.type),2935      );2936    }2937  }2938}2939function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {2940  if (__DEV__) {2941    if (2942      warnsIfNotActing === true &&2943      executionContext === NoContext &&2944      IsSomeRendererActing.current === false &&2945      IsThisRendererActing.current === false2946    ) {2947      const previousFiber = ReactCurrentFiberCurrent;2948      try {2949        setCurrentDebugFiberInDEV(fiber);2950        console.error(2951          'An update to %s inside a test was not wrapped in act(...).\n\n' +2952            'When testing, code that causes React state updates should be ' +2953            'wrapped into act(...):\n\n' +2954            'act(() => {\n' +2955            '  /* fire events that update state */\n' +2956            '});\n' +2957            '/* assert on the output */\n\n' +2958            "This ensures that you're testing the behavior the user would see " +2959            'in the browser.' +2960            ' Learn more at https://reactjs.org/link/wrap-tests-with-act',2961          getComponentName(fiber.type),2962        );2963      } finally {2964        if (previousFiber) {2965          setCurrentDebugFiberInDEV(fiber);2966        } else {2967          resetCurrentDebugFiberInDEV();2968        }2969      }2970    }2971  }2972}2973export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;2974// In tests, we want to enforce a mocked scheduler.2975let didWarnAboutUnmockedScheduler = false;2976// TODO Before we release concurrent mode, revisit this and decide whether a mocked2977// scheduler is the actual recommendation. The alternative could be a testing build,2978// a new lib, or whatever; we dunno just yet. This message is for early adopters2979// to get their tests right.2980export function warnIfUnmockedScheduler(fiber: Fiber) {2981  if (__DEV__) {2982    if (2983      didWarnAboutUnmockedScheduler === false &&2984      Scheduler.unstable_flushAllWithoutAsserting === undefined2985    ) {2986      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {2987        didWarnAboutUnmockedScheduler = true;2988        console.error(2989          'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +2990            'to guarantee consistent behaviour across tests and browsers. ' +2991            'For example, with jest: \n' +2992            // Break up requires to avoid accidentally parsing them as dependencies.2993            "jest.mock('scheduler', () => require" +2994            "('scheduler/unstable_mock'));\n\n" +2995            'For more info, visit https://reactjs.org/link/mock-scheduler',2996        );2997      } else if (warnAboutUnmockedScheduler === true) {2998        didWarnAboutUnmockedScheduler = true;2999        console.error(3000          'Starting from React v18, the "scheduler" module will need to be mocked ' +3001            'to guarantee consistent behaviour across tests and browsers. ' +3002            'For example, with jest: \n' +3003            // Break up requires to avoid accidentally parsing them as dependencies.3004            "jest.mock('scheduler', () => require" +3005            "('scheduler/unstable_mock'));\n\n" +3006            'For more info, visit https://reactjs.org/link/mock-scheduler',3007        );3008      }3009    }3010  }3011}3012function computeThreadID(root: FiberRoot, lane: Lane | Lanes) {3013  // Interaction threads are unique per root and expiration time.3014  // NOTE: Intentionally unsound cast. All that matters is that it's a number3015  // and it represents a batch of work. Could make a helper function instead,3016  // but meh this is fine for now.3017  return (lane: any) * 1000 + root.interactionThreadID;3018}3019export function markSpawnedWork(lane: Lane | Lanes) {3020  if (!enableSchedulerTracing) {3021    return;3022  }3023  if (spawnedWorkDuringRender === null) {3024    spawnedWorkDuringRender = [lane];3025  } else {3026    spawnedWorkDuringRender.push(lane);3027  }3028}3029function scheduleInteractions(3030  root: FiberRoot,3031  lane: Lane | Lanes,3032  interactions: Set<Interaction>,3033) {3034  if (!enableSchedulerTracing) {3035    return;3036  }3037  if (interactions.size > 0) {3038    const pendingInteractionMap = root.pendingInteractionMap;3039    const pendingInteractions = pendingInteractionMap.get(lane);3040    if (pendingInteractions != null) {3041      interactions.forEach(interaction => {3042        if (!pendingInteractions.has(interaction)) {3043          // Update the pending async work count for previously unscheduled interaction.3044          interaction.__count++;3045        }3046        pendingInteractions.add(interaction);3047      });3048    } else {3049      pendingInteractionMap.set(lane, new Set(interactions));3050      // Update the pending async work count for the current interactions.3051      interactions.forEach(interaction => {3052        interaction.__count++;3053      });3054    }3055    const subscriber = __subscriberRef.current;3056    if (subscriber !== null) {3057      const threadID = computeThreadID(root, lane);3058      subscriber.onWorkScheduled(interactions, threadID);3059    }3060  }3061}3062function schedulePendingInteractions(root: FiberRoot, lane: Lane | Lanes) {3063  // This is called when work is scheduled on a root.3064  // It associates the current interactions with the newly-scheduled expiration.3065  // They will be restored when that expiration is later committed.3066  if (!enableSchedulerTracing) {3067    return;3068  }3069  scheduleInteractions(root, lane, __interactionsRef.current);3070}3071function startWorkOnPendingInteractions(root: FiberRoot, lanes: Lanes) {3072  // This is called when new work is started on a root.3073  if (!enableSchedulerTracing) {3074    return;3075  }3076  // Determine which interactions this batch of work currently includes, So that3077  // we can accurately attribute time spent working on it, And so that cascading3078  // work triggered during the render phase will be associated with it.3079  const interactions: Set<Interaction> = new Set();3080  root.pendingInteractionMap.forEach((scheduledInteractions, scheduledLane) => {3081    if (includesSomeLane(lanes, scheduledLane)) {3082      scheduledInteractions.forEach(interaction =>3083        interactions.add(interaction),3084      );3085    }...

ReactFiberWorkLoop.old.js

Source:ReactFiberWorkLoop.old.js

...887    var prevDispatcher = pushDispatcher(); // If the root or lanes have changed, throw out the existing stack888    // and prepare a fresh one. Otherwise we'll continue where we left off.889    if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {890      prepareFreshStack(root, lanes);891      startWorkOnPendingInteractions(root, lanes);892    }893    var prevInteractions = pushInteractions(root);894    {895      markRenderStarted(lanes);896    }897    do {898      try {899        workLoopSync();900        break;901      } catch (thrownValue) {902        handleError(root, thrownValue);903      }904    } while (true);905    resetContextDependencies();906    {907      popInteractions(prevInteractions);908    }909    executionContext = prevExecutionContext;910    popDispatcher(prevDispatcher);911    if (workInProgress !== null) {912      // This is a sync render, so we should have finished the whole tree.913      {914        {915          throw Error( "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue." );916        }917      }918    }919    {920      markRenderStopped();921    } // Set this to null to indicate there's no in-progress render.922    workInProgressRoot = null;923    workInProgressRootRenderLanes = NoLanes;924    return workInProgressRootExitStatus;925  } // The work loop is an extremely hot path. Tell Closure not to inline it.926  /** @noinline */927  function workLoopSync() {928    // Already timed out, so perform work without checking if we need to yield.929    while (workInProgress !== null) {930      performUnitOfWork(workInProgress);931    }932  }933  function renderRootConcurrent(root, lanes) {934    var prevExecutionContext = executionContext;935    executionContext |= RenderContext;936    var prevDispatcher = pushDispatcher(); // If the root or lanes have changed, throw out the existing stack937    // and prepare a fresh one. Otherwise we'll continue where we left off.938    if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {939      resetRenderTimer();940      prepareFreshStack(root, lanes);941      startWorkOnPendingInteractions(root, lanes);942    }943    var prevInteractions = pushInteractions(root);944    {945      markRenderStarted(lanes);946    }947    do {948      try {949        workLoopConcurrent();950        break;951      } catch (thrownValue) {952        handleError(root, thrownValue);953      }954    } while (true);955    resetContextDependencies();956    {957      popInteractions(prevInteractions);958    }959    popDispatcher(prevDispatcher);960    executionContext = prevExecutionContext;961    if (workInProgress !== null) {962      // Still work remaining.963      {964        markRenderYielded();965      }966      return RootIncomplete;967    } else {968      // Completed the tree.969      {970        markRenderStopped();971      } // Set this to null to indicate there's no in-progress render.972      workInProgressRoot = null;973      workInProgressRootRenderLanes = NoLanes; // Return the final exit status.974      return workInProgressRootExitStatus;975    }976  }977  /** @noinline */978  function workLoopConcurrent() {979    // Perform work until Scheduler asks us to yield980    while (workInProgress !== null && !shouldYield()) {981      performUnitOfWork(workInProgress);982    }983  }984  function performUnitOfWork(unitOfWork) {985    // The current, flushed, state of this fiber is the alternate. Ideally986    // nothing should rely on this, but relying on it here means that we don't987    // need an additional field on the work in progress.988    var current = unitOfWork.alternate;989    setCurrentFiber(unitOfWork);990    var next;991    if ( (unitOfWork.mode & ProfileMode) !== NoMode) {992      startProfilerTimer(unitOfWork);993      next = beginWork$1(current, unitOfWork, subtreeRenderLanes);994      stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);995    } else {996      next = beginWork$1(current, unitOfWork, subtreeRenderLanes);997    }998    resetCurrentFiber();999    unitOfWork.memoizedProps = unitOfWork.pendingProps;1000    if (next === null) {1001      // If this doesn't spawn new work, complete the current work.1002      completeUnitOfWork(unitOfWork);1003    } else {1004      workInProgress = next;1005    }1006    ReactCurrentOwner$2.current = null;1007  }1008  function completeUnitOfWork(unitOfWork) {1009    // Attempt to complete the current unit of work, then move to the next1010    // sibling. If there are no more siblings, return to the parent fiber.1011    var completedWork = unitOfWork;1012    do {1013      // The current, flushed, state of this fiber is the alternate. Ideally1014      // nothing should rely on this, but relying on it here means that we don't1015      // need an additional field on the work in progress.1016      var current = completedWork.alternate;1017      var returnFiber = completedWork.return; // Check if the work completed or if something threw.1018      if ((completedWork.flags & Incomplete) === NoFlags) {1019        setCurrentFiber(completedWork);1020        var next = void 0;1021        if ( (completedWork.mode & ProfileMode) === NoMode) {1022          next = completeWork(current, completedWork, subtreeRenderLanes);1023        } else {1024          startProfilerTimer(completedWork);1025          next = completeWork(current, completedWork, subtreeRenderLanes); // Update render duration assuming we didn't error.1026          stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);1027        }1028        resetCurrentFiber();1029        if (next !== null) {1030          // Completing this fiber spawned new work. Work on that next.1031          workInProgress = next;1032          return;1033        }1034        resetChildLanes(completedWork);1035        if (returnFiber !== null && // Do not append effects to parents if a sibling failed to complete1036        (returnFiber.flags & Incomplete) === NoFlags) {1037          // Append all the effects of the subtree and this fiber onto the effect1038          // list of the parent. The completion order of the children affects the1039          // side-effect order.1040          if (returnFiber.firstEffect === null) {1041            returnFiber.firstEffect = completedWork.firstEffect;1042          }1043          if (completedWork.lastEffect !== null) {1044            if (returnFiber.lastEffect !== null) {1045              returnFiber.lastEffect.nextEffect = completedWork.firstEffect;1046            }1047            returnFiber.lastEffect = completedWork.lastEffect;1048          } // If this fiber had side-effects, we append it AFTER the children's1049          // side-effects. We can perform certain side-effects earlier if needed,1050          // by doing multiple passes over the effect list. We don't want to1051          // schedule our own side-effect on our own list because if end up1052          // reusing children we'll schedule this effect onto itself since we're1053          // at the end.1054          var flags = completedWork.flags; // Skip both NoWork and PerformedWork tags when creating the effect1055          // list. PerformedWork effect is read by React DevTools but shouldn't be1056          // committed.1057          if (flags > PerformedWork) {1058            if (returnFiber.lastEffect !== null) {1059              returnFiber.lastEffect.nextEffect = completedWork;1060            } else {1061              returnFiber.firstEffect = completedWork;1062            }1063            returnFiber.lastEffect = completedWork;1064          }1065        }1066      } else {1067        // This fiber did not complete because something threw. Pop values off1068        // the stack without entering the complete phase. If this is a boundary,1069        // capture values if possible.1070        var _next = unwindWork(completedWork); // Because this fiber did not complete, don't reset its expiration time.1071        if (_next !== null) {1072          // If completing this work spawned new work, do that next. We'll come1073          // back here again.1074          // Since we're restarting, remove anything that is not a host effect1075          // from the effect tag.1076          _next.flags &= HostEffectMask;1077          workInProgress = _next;1078          return;1079        }1080        if ( (completedWork.mode & ProfileMode) !== NoMode) {1081          // Record the render duration for the fiber that errored.1082          stopProfilerTimerIfRunningAndRecordDelta(completedWork, false); // Include the time spent working on failed children before continuing.1083          var actualDuration = completedWork.actualDuration;1084          var child = completedWork.child;1085          while (child !== null) {1086            actualDuration += child.actualDuration;1087            child = child.sibling;1088          }1089          completedWork.actualDuration = actualDuration;1090        }1091        if (returnFiber !== null) {1092          // Mark the parent fiber as incomplete and clear its effect list.1093          returnFiber.firstEffect = returnFiber.lastEffect = null;1094          returnFiber.flags |= Incomplete;1095        }1096      }1097      var siblingFiber = completedWork.sibling;1098      if (siblingFiber !== null) {1099        // If there is more work to do in this returnFiber, do that next.1100        workInProgress = siblingFiber;1101        return;1102      } // Otherwise, return to the parent1103      completedWork = returnFiber; // Update the next thing we're working on in case something throws.1104      workInProgress = completedWork;1105    } while (completedWork !== null); // We've reached the root.1106    if (workInProgressRootExitStatus === RootIncomplete) {1107      workInProgressRootExitStatus = RootCompleted;1108    }1109  }1110  function resetChildLanes(completedWork) {1111    if ( // TODO: Move this check out of the hot path by moving `resetChildLanes`1112    // to switch statement in `completeWork`.1113    (completedWork.tag === LegacyHiddenComponent || completedWork.tag === OffscreenComponent) && completedWork.memoizedState !== null && !includesSomeLane(subtreeRenderLanes, OffscreenLane) && (completedWork.mode & ConcurrentMode) !== NoLanes) {1114      // The children of this component are hidden. Don't bubble their1115      // expiration times.1116      return;1117    }1118    var newChildLanes = NoLanes; // Bubble up the earliest expiration time.1119    if ( (completedWork.mode & ProfileMode) !== NoMode) {1120      // In profiling mode, resetChildExpirationTime is also used to reset1121      // profiler durations.1122      var actualDuration = completedWork.actualDuration;1123      var treeBaseDuration = completedWork.selfBaseDuration; // When a fiber is cloned, its actualDuration is reset to 0. This value will1124      // only be updated if work is done on the fiber (i.e. it doesn't bailout).1125      // When work is done, it should bubble to the parent's actualDuration. If1126      // the fiber has not been cloned though, (meaning no work was done), then1127      // this value will reflect the amount of time spent working on a previous1128      // render. In that case it should not bubble. We determine whether it was1129      // cloned by comparing the child pointer.1130      var shouldBubbleActualDurations = completedWork.alternate === null || completedWork.child !== completedWork.alternate.child;1131      var child = completedWork.child;1132      while (child !== null) {1133        newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));1134        if (shouldBubbleActualDurations) {1135          actualDuration += child.actualDuration;1136        }1137        treeBaseDuration += child.treeBaseDuration;1138        child = child.sibling;1139      }1140      var isTimedOutSuspense = completedWork.tag === SuspenseComponent && completedWork.memoizedState !== null;1141      if (isTimedOutSuspense) {1142        // Don't count time spent in a timed out Suspense subtree as part of the base duration.1143        var primaryChildFragment = completedWork.child;1144        if (primaryChildFragment !== null) {1145          treeBaseDuration -= primaryChildFragment.treeBaseDuration;1146        }1147      }1148      completedWork.actualDuration = actualDuration;1149      completedWork.treeBaseDuration = treeBaseDuration;1150    } else {1151      var _child = completedWork.child;1152      while (_child !== null) {1153        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));1154        _child = _child.sibling;1155      }1156    }1157    completedWork.childLanes = newChildLanes;1158  }1159  function commitRoot(root) {1160    var renderPriorityLevel = getCurrentPriorityLevel();1161    runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));1162    return null;1163  }1164  function commitRootImpl(root, renderPriorityLevel) {1165    do {1166      // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which1167      // means `flushPassiveEffects` will sometimes result in additional1168      // passive effects. So we need to keep flushing in a loop until there are1169      // no more pending effects.1170      // TODO: Might be better if `flushPassiveEffects` did not automatically1171      // flush synchronous work at the end, to avoid factoring hazards like this.1172      flushPassiveEffects();1173    } while (rootWithPendingPassiveEffects !== null);1174    flushRenderPhaseStrictModeWarningsInDEV();1175    if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {1176      {1177        throw Error( "Should not already be working." );1178      }1179    }1180    var finishedWork = root.finishedWork;1181    var lanes = root.finishedLanes;1182    {1183      markCommitStarted(lanes);1184    }1185    if (finishedWork === null) {1186      {1187        markCommitStopped();1188      }1189      return null;1190    }1191    root.finishedWork = null;1192    root.finishedLanes = NoLanes;1193    if (!(finishedWork !== root.current)) {1194      {1195        throw Error( "Cannot commit the same tree as before. This error is likely caused by a bug in React. Please file an issue." );1196      }1197    } // commitRoot never returns a continuation; it always finishes synchronously.1198    // So we can clear these now to allow a new callback to be scheduled.1199    root.callbackNode = null; // Update the first and last pending times on this root. The new first1200    // pending time is whatever is left on the root fiber.1201    var remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);1202    markRootFinished(root, remainingLanes); // Clear already finished discrete updates in case that a later call of1203    // `flushDiscreteUpdates` starts a useless render pass which may cancels1204    // a scheduled timeout.1205    if (rootsWithPendingDiscreteUpdates !== null) {1206      if (!hasDiscreteLanes(remainingLanes) && rootsWithPendingDiscreteUpdates.has(root)) {1207        rootsWithPendingDiscreteUpdates.delete(root);1208      }1209    }1210    if (root === workInProgressRoot) {1211      // We can reset these now that they are finished.1212      workInProgressRoot = null;1213      workInProgress = null;1214      workInProgressRootRenderLanes = NoLanes;1215    } // Get the list of effects.1216    var firstEffect;1217    if (finishedWork.flags > PerformedWork) {1218      // A fiber's effect list consists only of its children, not itself. So if1219      // the root has an effect, we need to add it to the end of the list. The1220      // resulting list is the set that would belong to the root's parent, if it1221      // had one; that is, all the effects in the tree including the root.1222      if (finishedWork.lastEffect !== null) {1223        finishedWork.lastEffect.nextEffect = finishedWork;1224        firstEffect = finishedWork.firstEffect;1225      } else {1226        firstEffect = finishedWork;1227      }1228    } else {1229      // There is no effect on the root.1230      firstEffect = finishedWork.firstEffect;1231    }1232    if (firstEffect !== null) {1233      var prevExecutionContext = executionContext;1234      executionContext |= CommitContext;1235      var prevInteractions = pushInteractions(root); // Reset this to null before calling lifecycles1236      ReactCurrentOwner$2.current = null; // The commit phase is broken into several sub-phases. We do a separate pass1237      // of the effect list for each phase: all mutation effects come before all1238      // layout effects, and so on.1239      // The first phase a "before mutation" phase. We use this phase to read the1240      // state of the host tree right before we mutate it. This is where1241      // getSnapshotBeforeUpdate is called.1242      focusedInstanceHandle = prepareForCommit(root.containerInfo);1243      shouldFireAfterActiveInstanceBlur = false;1244      nextEffect = firstEffect;1245      do {1246        {1247          invokeGuardedCallback(null, commitBeforeMutationEffects, null);1248          if (hasCaughtError()) {1249            if (!(nextEffect !== null)) {1250              {1251                throw Error( "Should be working on an effect." );1252              }1253            }1254            var error = clearCaughtError();1255            captureCommitPhaseError(nextEffect, error);1256            nextEffect = nextEffect.nextEffect;1257          }1258        }1259      } while (nextEffect !== null); // We no longer need to track the active instance fiber1260      focusedInstanceHandle = null;1261      {1262        // Mark the current commit time to be shared by all Profilers in this1263        // batch. This enables them to be grouped later.1264        recordCommitTime();1265      } // The next phase is the mutation phase, where we mutate the host tree.1266      nextEffect = firstEffect;1267      do {1268        {1269          invokeGuardedCallback(null, commitMutationEffects, null, root, renderPriorityLevel);1270          if (hasCaughtError()) {1271            if (!(nextEffect !== null)) {1272              {1273                throw Error( "Should be working on an effect." );1274              }1275            }1276            var _error = clearCaughtError();1277            captureCommitPhaseError(nextEffect, _error);1278            nextEffect = nextEffect.nextEffect;1279          }1280        }1281      } while (nextEffect !== null);1282      resetAfterCommit(root.containerInfo); // The work-in-progress tree is now the current tree. This must come after1283      // the mutation phase, so that the previous tree is still current during1284      // componentWillUnmount, but before the layout phase, so that the finished1285      // work is current during componentDidMount/Update.1286      root.current = finishedWork; // The next phase is the layout phase, where we call effects that read1287      // the host tree after it's been mutated. The idiomatic use case for this is1288      // layout, but class component lifecycles also fire here for legacy reasons.1289      nextEffect = firstEffect;1290      do {1291        {1292          invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);1293          if (hasCaughtError()) {1294            if (!(nextEffect !== null)) {1295              {1296                throw Error( "Should be working on an effect." );1297              }1298            }1299            var _error2 = clearCaughtError();1300            captureCommitPhaseError(nextEffect, _error2);1301            nextEffect = nextEffect.nextEffect;1302          }1303        }1304      } while (nextEffect !== null);1305      nextEffect = null; // Tell Scheduler to yield at the end of the frame, so the browser has an1306      // opportunity to paint.1307      requestPaint();1308      {1309        popInteractions(prevInteractions);1310      }1311      executionContext = prevExecutionContext;1312    } else {1313      // No effects.1314      root.current = finishedWork; // Measure these anyway so the flamegraph explicitly shows that there were1315      // no effects.1316      // TODO: Maybe there's a better way to report this.1317      {1318        recordCommitTime();1319      }1320    }1321    var rootDidHavePassiveEffects = rootDoesHavePassiveEffects;1322    if (rootDoesHavePassiveEffects) {1323      // This commit has passive effects. Stash a reference to them. But don't1324      // schedule a callback until after flushing layout work.1325      rootDoesHavePassiveEffects = false;1326      rootWithPendingPassiveEffects = root;1327      pendingPassiveEffectsLanes = lanes;1328      pendingPassiveEffectsRenderPriority = renderPriorityLevel;1329    } else {1330      // We are done with the effect chain at this point so let's clear the1331      // nextEffect pointers to assist with GC. If we have passive effects, we'll1332      // clear this in flushPassiveEffects.1333      nextEffect = firstEffect;1334      while (nextEffect !== null) {1335        var nextNextEffect = nextEffect.nextEffect;1336        nextEffect.nextEffect = null;1337        if (nextEffect.flags & Deletion) {1338          detachFiberAfterEffects(nextEffect);1339        }1340        nextEffect = nextNextEffect;1341      }1342    } // Read this again, since an effect might have updated it1343    remainingLanes = root.pendingLanes; // Check if there's remaining work on this root1344    if (remainingLanes !== NoLanes) {1345      {1346        if (spawnedWorkDuringRender !== null) {1347          var expirationTimes = spawnedWorkDuringRender;1348          spawnedWorkDuringRender = null;1349          for (var i = 0; i < expirationTimes.length; i++) {1350            scheduleInteractions(root, expirationTimes[i], root.memoizedInteractions);1351          }1352        }1353        schedulePendingInteractions(root, remainingLanes);1354      }1355    } else {1356      // If there's no remaining work, we can clear the set of already failed1357      // error boundaries.1358      legacyErrorBoundariesThatAlreadyFailed = null;1359    }1360    {1361      if (!rootDidHavePassiveEffects) {1362        // If there are no passive effects, then we can complete the pending interactions.1363        // Otherwise, we'll wait until after the passive effects are flushed.1364        // Wait to do this until after remaining work has been scheduled,1365        // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.1366        finishPendingInteractions(root, lanes);1367      }1368    }1369    if (remainingLanes === SyncLane) {1370      // Count the number of times the root synchronously re-renders without1371      // finishing. If there are too many, it indicates an infinite update loop.1372      if (root === rootWithNestedUpdates) {1373        nestedUpdateCount++;1374      } else {1375        nestedUpdateCount = 0;1376        rootWithNestedUpdates = root;1377      }1378    } else {1379      nestedUpdateCount = 0;1380    }1381    onCommitRoot(finishedWork.stateNode, renderPriorityLevel);1382    {1383      onCommitRoot$1();1384    } // Always call this before exiting `commitRoot`, to ensure that any1385    // additional work on this root is scheduled.1386    ensureRootIsScheduled(root, now());1387    if (hasUncaughtError) {1388      hasUncaughtError = false;1389      var _error3 = firstUncaughtError;1390      firstUncaughtError = null;1391      throw _error3;1392    }1393    if ((executionContext & LegacyUnbatchedContext) !== NoContext) {1394      {1395        markCommitStopped();1396      } // This is a legacy edge case. We just committed the initial mount of1397      // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired1398      // synchronously, but layout updates should be deferred until the end1399      // of the batch.1400      return null;1401    } // If layout work was scheduled, flush it now.1402    flushSyncCallbackQueue();1403    {1404      markCommitStopped();1405    }1406    return null;1407  }1408  function commitBeforeMutationEffects() {1409    while (nextEffect !== null) {1410      var current = nextEffect.alternate;1411      if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {1412        if ((nextEffect.flags & Deletion) !== NoFlags) {1413          if (doesFiberContain(nextEffect, focusedInstanceHandle)) {1414            shouldFireAfterActiveInstanceBlur = true;1415          }1416        } else {1417          // TODO: Move this out of the hot path using a dedicated effect tag.1418          if (nextEffect.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, nextEffect) && doesFiberContain(nextEffect, focusedInstanceHandle)) {1419            shouldFireAfterActiveInstanceBlur = true;1420          }1421        }1422      }1423      var flags = nextEffect.flags;1424      if ((flags & Snapshot) !== NoFlags) {1425        setCurrentFiber(nextEffect);1426        commitBeforeMutationLifeCycles(current, nextEffect);1427        resetCurrentFiber();1428      }1429      if ((flags & Passive) !== NoFlags) {1430        // If there are passive effects, schedule a callback to flush at1431        // the earliest opportunity.1432        if (!rootDoesHavePassiveEffects) {1433          rootDoesHavePassiveEffects = true;1434          scheduleCallback(NormalPriority$1, function () {1435            flushPassiveEffects();1436            return null;1437          });1438        }1439      }1440      nextEffect = nextEffect.nextEffect;1441    }1442  }1443  function commitMutationEffects(root, renderPriorityLevel) {1444    // TODO: Should probably move the bulk of this function to commitWork.1445    while (nextEffect !== null) {1446      setCurrentFiber(nextEffect);1447      var flags = nextEffect.flags;1448      if (flags & ContentReset) {1449        commitResetTextContent(nextEffect);1450      }1451      if (flags & Ref) {1452        var current = nextEffect.alternate;1453        if (current !== null) {1454          commitDetachRef(current);1455        }1456      } // The following switch statement is only concerned about placement,1457      // updates, and deletions. To avoid needing to add a case for every possible1458      // bitmap value, we remove the secondary effects from the effect tag and1459      // switch on that value.1460      var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);1461      switch (primaryFlags) {1462        case Placement:1463          {1464            commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is1465            // inserted, before any life-cycles like componentDidMount gets called.1466            // TODO: findDOMNode doesn't rely on this any more but isMounted does1467            // and isMounted is deprecated anyway so we should be able to kill this.1468            nextEffect.flags &= ~Placement;1469            break;1470          }1471        case PlacementAndUpdate:1472          {1473            // Placement1474            commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is1475            // inserted, before any life-cycles like componentDidMount gets called.1476            nextEffect.flags &= ~Placement; // Update1477            var _current = nextEffect.alternate;1478            commitWork(_current, nextEffect);1479            break;1480          }1481        case Hydrating:1482          {1483            nextEffect.flags &= ~Hydrating;1484            break;1485          }1486        case HydratingAndUpdate:1487          {1488            nextEffect.flags &= ~Hydrating; // Update1489            var _current2 = nextEffect.alternate;1490            commitWork(_current2, nextEffect);1491            break;1492          }1493        case Update:1494          {1495            var _current3 = nextEffect.alternate;1496            commitWork(_current3, nextEffect);1497            break;1498          }1499        case Deletion:1500          {1501            commitDeletion(root, nextEffect);1502            break;1503          }1504      }1505      resetCurrentFiber();1506      nextEffect = nextEffect.nextEffect;1507    }1508  }1509  function commitLayoutEffects(root, committedLanes) {1510    {1511      markLayoutEffectsStarted(committedLanes);1512    } // TODO: Should probably move the bulk of this function to commitWork.1513    while (nextEffect !== null) {1514      setCurrentFiber(nextEffect);1515      var flags = nextEffect.flags;1516      if (flags & (Update | Callback)) {1517        var current = nextEffect.alternate;1518        commitLifeCycles(root, current, nextEffect);1519      }1520      {1521        if (flags & Ref) {1522          commitAttachRef(nextEffect);1523        }1524      }1525      resetCurrentFiber();1526      nextEffect = nextEffect.nextEffect;1527    }1528    {1529      markLayoutEffectsStopped();1530    }1531  }1532  function flushPassiveEffects() {1533    // Returns whether passive effects were flushed.1534    if (pendingPassiveEffectsRenderPriority !== NoPriority$1) {1535      var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority$1 ? NormalPriority$1 : pendingPassiveEffectsRenderPriority;1536      pendingPassiveEffectsRenderPriority = NoPriority$1;1537      {1538        return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl);1539      }1540    }1541    return false;1542  }1543  function enqueuePendingPassiveHookEffectMount(fiber, effect) {1544    pendingPassiveHookEffectsMount.push(effect, fiber);1545    if (!rootDoesHavePassiveEffects) {1546      rootDoesHavePassiveEffects = true;1547      scheduleCallback(NormalPriority$1, function () {1548        flushPassiveEffects();1549        return null;1550      });1551    }1552  }1553  function enqueuePendingPassiveHookEffectUnmount(fiber, effect) {1554    pendingPassiveHookEffectsUnmount.push(effect, fiber);1555    {1556      fiber.flags |= PassiveUnmountPendingDev;1557      var alternate = fiber.alternate;1558      if (alternate !== null) {1559        alternate.flags |= PassiveUnmountPendingDev;1560      }1561    }1562    if (!rootDoesHavePassiveEffects) {1563      rootDoesHavePassiveEffects = true;1564      scheduleCallback(NormalPriority$1, function () {1565        flushPassiveEffects();1566        return null;1567      });1568    }1569  }1570  function invokePassiveEffectCreate(effect) {1571    var create = effect.create;1572    effect.destroy = create();1573  }1574  function flushPassiveEffectsImpl() {1575    if (rootWithPendingPassiveEffects === null) {1576      return false;1577    }1578    var root = rootWithPendingPassiveEffects;1579    var lanes = pendingPassiveEffectsLanes;1580    rootWithPendingPassiveEffects = null;1581    pendingPassiveEffectsLanes = NoLanes;1582    if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {1583      {1584        throw Error( "Cannot flush passive effects while already rendering." );1585      }1586    }1587    {1588      markPassiveEffectsStarted(lanes);1589    }1590    {1591      isFlushingPassiveEffects = true;1592    }1593    var prevExecutionContext = executionContext;1594    executionContext |= CommitContext;1595    var prevInteractions = pushInteractions(root); // It's important that ALL pending passive effect destroy functions are called1596    // before ANY passive effect create functions are called.1597    // Otherwise effects in sibling components might interfere with each other.1598    // e.g. a destroy function in one component may unintentionally override a ref1599    // value set by a create function in another component.1600    // Layout effects have the same constraint.1601    // First pass: Destroy stale passive effects.1602    var unmountEffects = pendingPassiveHookEffectsUnmount;1603    pendingPassiveHookEffectsUnmount = [];1604    for (var i = 0; i < unmountEffects.length; i += 2) {1605      var _effect = unmountEffects[i];1606      var fiber = unmountEffects[i + 1];1607      var destroy = _effect.destroy;1608      _effect.destroy = undefined;1609      {1610        fiber.flags &= ~PassiveUnmountPendingDev;1611        var alternate = fiber.alternate;1612        if (alternate !== null) {1613          alternate.flags &= ~PassiveUnmountPendingDev;1614        }1615      }1616      if (typeof destroy === 'function') {1617        {1618          setCurrentFiber(fiber);1619          {1620            invokeGuardedCallback(null, destroy, null);1621          }1622          if (hasCaughtError()) {1623            if (!(fiber !== null)) {1624              {1625                throw Error( "Should be working on an effect." );1626              }1627            }1628            var error = clearCaughtError();1629            captureCommitPhaseError(fiber, error);1630          }1631          resetCurrentFiber();1632        }1633      }1634    } // Second pass: Create new passive effects.1635    var mountEffects = pendingPassiveHookEffectsMount;1636    pendingPassiveHookEffectsMount = [];1637    for (var _i = 0; _i < mountEffects.length; _i += 2) {1638      var _effect2 = mountEffects[_i];1639      var _fiber = mountEffects[_i + 1];1640      {1641        setCurrentFiber(_fiber);1642        {1643          invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);1644        }1645        if (hasCaughtError()) {1646          if (!(_fiber !== null)) {1647            {1648              throw Error( "Should be working on an effect." );1649            }1650          }1651          var _error4 = clearCaughtError();1652          captureCommitPhaseError(_fiber, _error4);1653        }1654        resetCurrentFiber();1655      }1656    } // Note: This currently assumes there are no passive effects on the root fiber1657    // because the root is not part of its own effect list.1658    // This could change in the future.1659    var effect = root.current.firstEffect;1660    while (effect !== null) {1661      var nextNextEffect = effect.nextEffect; // Remove nextEffect pointer to assist GC1662      effect.nextEffect = null;1663      if (effect.flags & Deletion) {1664        detachFiberAfterEffects(effect);1665      }1666      effect = nextNextEffect;1667    }1668    {1669      popInteractions(prevInteractions);1670      finishPendingInteractions(root, lanes);1671    }1672    {1673      isFlushingPassiveEffects = false;1674    }1675    {1676      markPassiveEffectsStopped();1677    }1678    executionContext = prevExecutionContext;1679    flushSyncCallbackQueue(); // If additional passive effects were scheduled, increment a counter. If this1680    // exceeds the limit, we'll fire a warning.1681    nestedPassiveUpdateCount = rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;1682    return true;1683  }1684  function isAlreadyFailedLegacyErrorBoundary(instance) {1685    return legacyErrorBoundariesThatAlreadyFailed !== null && legacyErrorBoundariesThatAlreadyFailed.has(instance);1686  }1687  function markLegacyErrorBoundaryAsFailed(instance) {1688    if (legacyErrorBoundariesThatAlreadyFailed === null) {1689      legacyErrorBoundariesThatAlreadyFailed = new Set([instance]);1690    } else {1691      legacyErrorBoundariesThatAlreadyFailed.add(instance);1692    }1693  }1694  function prepareToThrowUncaughtError(error) {1695    if (!hasUncaughtError) {1696      hasUncaughtError = true;1697      firstUncaughtError = error;1698    }1699  }1700  var onUncaughtError = prepareToThrowUncaughtError;1701  function captureCommitPhaseErrorOnRoot(rootFiber, sourceFiber, error) {1702    var errorInfo = createCapturedValue(error, sourceFiber);1703    var update = createRootErrorUpdate(rootFiber, errorInfo, SyncLane);1704    enqueueUpdate(rootFiber, update);1705    var eventTime = requestEventTime();1706    var root = markUpdateLaneFromFiberToRoot(rootFiber, SyncLane);1707    if (root !== null) {1708      markRootUpdated(root, SyncLane, eventTime);1709      ensureRootIsScheduled(root, eventTime);1710      schedulePendingInteractions(root, SyncLane);1711    }1712  }1713  function captureCommitPhaseError(sourceFiber, error) {1714    if (sourceFiber.tag === HostRoot) {1715      // Error was thrown at the root. There is no parent, so the root1716      // itself should capture it.1717      captureCommitPhaseErrorOnRoot(sourceFiber, sourceFiber, error);1718      return;1719    }1720    var fiber = sourceFiber.return;1721    while (fiber !== null) {1722      if (fiber.tag === HostRoot) {1723        captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);1724        return;1725      } else if (fiber.tag === ClassComponent) {1726        var ctor = fiber.type;1727        var instance = fiber.stateNode;1728        if (typeof ctor.getDerivedStateFromError === 'function' || typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {1729          var errorInfo = createCapturedValue(error, sourceFiber);1730          var update = createClassErrorUpdate(fiber, errorInfo, SyncLane);1731          enqueueUpdate(fiber, update);1732          var eventTime = requestEventTime();1733          var root = markUpdateLaneFromFiberToRoot(fiber, SyncLane);1734          if (root !== null) {1735            markRootUpdated(root, SyncLane, eventTime);1736            ensureRootIsScheduled(root, eventTime);1737            schedulePendingInteractions(root, SyncLane);1738          } else {1739            // This component has already been unmounted.1740            // We can't schedule any follow up work for the root because the fiber is already unmounted,1741            // but we can still call the log-only boundary so the error isn't swallowed.1742            //1743            // TODO This is only a temporary bandaid for the old reconciler fork.1744            // We can delete this special case once the new fork is merged.1745            if (typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {1746              try {1747                instance.componentDidCatch(error, errorInfo);1748              } catch (errorToIgnore) {// TODO Ignore this error? Rethrow it?1749                // This is kind of an edge case.1750              }1751            }1752          }1753          return;1754        }1755      }1756      fiber = fiber.return;1757    }1758  }1759  function pingSuspendedRoot(root, wakeable, pingedLanes) {1760    var pingCache = root.pingCache;1761    if (pingCache !== null) {1762      // The wakeable resolved, so we no longer need to memoize, because it will1763      // never be thrown again.1764      pingCache.delete(wakeable);1765    }1766    var eventTime = requestEventTime();1767    markRootPinged(root, pingedLanes);1768    if (workInProgressRoot === root && isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)) {1769      // Received a ping at the same priority level at which we're currently1770      // rendering. We might want to restart this render. This should mirror1771      // the logic of whether or not a root suspends once it completes.1772      // TODO: If we're rendering sync either due to Sync, Batched or expired,1773      // we should probably never restart.1774      // If we're suspended with delay, or if it's a retry, we'll always suspend1775      // so we can always restart.1776      if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && includesOnlyRetries(workInProgressRootRenderLanes) && now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {1777        // Restart from the root.1778        prepareFreshStack(root, NoLanes);1779      } else {1780        // Even though we can't restart right now, we might get an1781        // opportunity later. So we mark this render as having a ping.1782        workInProgressRootPingedLanes = mergeLanes(workInProgressRootPingedLanes, pingedLanes);1783      }1784    }1785    ensureRootIsScheduled(root, eventTime);1786    schedulePendingInteractions(root, pingedLanes);1787  }1788  function retryTimedOutBoundary(boundaryFiber, retryLane) {1789    // The boundary fiber (a Suspense component or SuspenseList component)1790    // previously was rendered in its fallback state. One of the promises that1791    // suspended it has resolved, which means at least part of the tree was1792    // likely unblocked. Try rendering again, at a new expiration time.1793    if (retryLane === NoLane) {1794      retryLane = requestRetryLane(boundaryFiber);1795    } // TODO: Special case idle priority?1796    var eventTime = requestEventTime();1797    var root = markUpdateLaneFromFiberToRoot(boundaryFiber, retryLane);1798    if (root !== null) {1799      markRootUpdated(root, retryLane, eventTime);1800      ensureRootIsScheduled(root, eventTime);1801      schedulePendingInteractions(root, retryLane);1802    }1803  }1804  function retryDehydratedSuspenseBoundary(boundaryFiber) {1805    var suspenseState = boundaryFiber.memoizedState;1806    var retryLane = NoLane;1807    if (suspenseState !== null) {1808      retryLane = suspenseState.retryLane;1809    }1810    retryTimedOutBoundary(boundaryFiber, retryLane);1811  }1812  function resolveRetryWakeable(boundaryFiber, wakeable) {1813    var retryLane = NoLane; // Default1814    var retryCache;1815    {1816      switch (boundaryFiber.tag) {1817        case SuspenseComponent:1818          retryCache = boundaryFiber.stateNode;1819          var suspenseState = boundaryFiber.memoizedState;1820          if (suspenseState !== null) {1821            retryLane = suspenseState.retryLane;1822          }1823          break;1824        case SuspenseListComponent:1825          retryCache = boundaryFiber.stateNode;1826          break;1827        default:1828          {1829            {1830              throw Error( "Pinged unknown suspense boundary type. This is probably a bug in React." );1831            }1832          }1833      }1834    }1835    if (retryCache !== null) {1836      // The wakeable resolved, so we no longer need to memoize, because it will1837      // never be thrown again.1838      retryCache.delete(wakeable);1839    }1840    retryTimedOutBoundary(boundaryFiber, retryLane);1841  } // Computes the next Just Noticeable Difference (JND) boundary.1842  // The theory is that a person can't tell the difference between small differences in time.1843  // Therefore, if we wait a bit longer than necessary that won't translate to a noticeable1844  // difference in the experience. However, waiting for longer might mean that we can avoid1845  // showing an intermediate loading state. The longer we have already waited, the harder it1846  // is to tell small differences in time. Therefore, the longer we've already waited,1847  // the longer we can wait additionally. At some point we have to give up though.1848  // We pick a train model where the next boundary commits at a consistent schedule.1849  // These particular numbers are vague estimates. We expect to adjust them based on research.1850  function jnd(timeElapsed) {1851    return timeElapsed < 120 ? 120 : timeElapsed < 480 ? 480 : timeElapsed < 1080 ? 1080 : timeElapsed < 1920 ? 1920 : timeElapsed < 3000 ? 3000 : timeElapsed < 4320 ? 4320 : ceil(timeElapsed / 1960) * 1960;1852  }1853  function checkForNestedUpdates() {1854    if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {1855      nestedUpdateCount = 0;1856      rootWithNestedUpdates = null;1857      {1858        {1859          throw Error( "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." );1860        }1861      }1862    }1863    {1864      if (nestedPassiveUpdateCount > NESTED_PASSIVE_UPDATE_LIMIT) {1865        nestedPassiveUpdateCount = 0;1866        error('Maximum update depth exceeded. This can happen when a component ' + "calls setState inside useEffect, but useEffect either doesn't " + 'have a dependency array, or one of the dependencies changes on ' + 'every render.');1867      }1868    }1869  }1870  function flushRenderPhaseStrictModeWarningsInDEV() {1871    {1872      ReactStrictModeWarnings.flushLegacyContextWarning();1873      {1874        ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();1875      }1876    }1877  }1878  var didWarnStateUpdateForNotYetMountedComponent = null;1879  function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {1880    {1881      if ((executionContext & RenderContext) !== NoContext) {1882        // We let the other warning about render phase updates deal with this one.1883        return;1884      }1885      if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {1886        return;1887      }1888      var tag = fiber.tag;1889      if (tag !== IndeterminateComponent && tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {1890        // Only warn for user-defined components, not internal ones like Suspense.1891        return;1892      } // We show the whole stack but dedupe on the top component's name because1893      // the problematic code almost always lies inside that component.1894      var componentName = getComponentName(fiber.type) || 'ReactComponent';1895      if (didWarnStateUpdateForNotYetMountedComponent !== null) {1896        if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {1897          return;1898        }1899        didWarnStateUpdateForNotYetMountedComponent.add(componentName);1900      } else {1901        didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]);1902      }1903      var previousFiber = current;1904      try {1905        setCurrentFiber(fiber);1906        error("Can't perform a React state update on a component that hasn't mounted yet. " + 'This indicates that you have a side-effect in your render function that ' + 'asynchronously later calls tries to update the component. Move this work to ' + 'useEffect instead.');1907      } finally {1908        if (previousFiber) {1909          setCurrentFiber(fiber);1910        } else {1911          resetCurrentFiber();1912        }1913      }1914    }1915  }1916  var didWarnStateUpdateForUnmountedComponent = null;1917  function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {1918    {1919      var tag = fiber.tag;1920      if (tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {1921        // Only warn for user-defined components, not internal ones like Suspense.1922        return;1923      } // If there are pending passive effects unmounts for this Fiber,1924      // we can assume that they would have prevented this update.1925      if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {1926        return;1927      } // We show the whole stack but dedupe on the top component's name because1928      // the problematic code almost always lies inside that component.1929      var componentName = getComponentName(fiber.type) || 'ReactComponent';1930      if (didWarnStateUpdateForUnmountedComponent !== null) {1931        if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {1932          return;1933        }1934        didWarnStateUpdateForUnmountedComponent.add(componentName);1935      } else {1936        didWarnStateUpdateForUnmountedComponent = new Set([componentName]);1937      }1938      if (isFlushingPassiveEffects) ; else {1939        var previousFiber = current;1940        try {1941          setCurrentFiber(fiber);1942          error("Can't perform a React state update on an unmounted component. This " + 'is a no-op, but it indicates a memory leak in your application. To ' + 'fix, cancel all subscriptions and asynchronous tasks in %s.', tag === ClassComponent ? 'the componentWillUnmount method' : 'a useEffect cleanup function');1943        } finally {1944          if (previousFiber) {1945            setCurrentFiber(fiber);1946          } else {1947            resetCurrentFiber();1948          }1949        }1950      }1951    }1952  }1953  var beginWork$1;1954  {1955    var dummyFiber = null;1956    beginWork$1 = function (current, unitOfWork, lanes) {1957      // If a component throws an error, we replay it again in a synchronously1958      // dispatched event, so that the debugger will treat it as an uncaught1959      // error See ReactErrorUtils for more information.1960      // Before entering the begin phase, copy the work-in-progress onto a dummy1961      // fiber. If beginWork throws, we'll use this to reset the state.1962      var originalWorkInProgressCopy = assignFiberPropertiesInDEV(dummyFiber, unitOfWork);1963      try {1964        return beginWork(current, unitOfWork, lanes);1965      } catch (originalError) {1966        if (originalError !== null && typeof originalError === 'object' && typeof originalError.then === 'function') {1967          // Don't replay promises. Treat everything else like an error.1968          throw originalError;1969        } // Keep this code in sync with handleError; any changes here must have1970        // corresponding changes there.1971        resetContextDependencies();1972        resetHooksAfterThrow(); // Don't reset current debug fiber, since we're about to work on the1973        // same fiber again.1974        // Unwind the failed stack frame1975        unwindInterruptedWork(unitOfWork); // Restore the original properties of the fiber.1976        assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);1977        if ( unitOfWork.mode & ProfileMode) {1978          // Reset the profiler timer.1979          startProfilerTimer(unitOfWork);1980        } // Run beginWork again.1981        invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);1982        if (hasCaughtError()) {1983          var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.1984          // Rethrow this error instead of the original one.1985          throw replayError;1986        } else {1987          // This branch is reachable if the render phase is impure.1988          throw originalError;1989        }1990      }1991    };1992  }1993  var didWarnAboutUpdateInRender = false;1994  var didWarnAboutUpdateInRenderForAnotherComponent;1995  {1996    didWarnAboutUpdateInRenderForAnotherComponent = new Set();1997  }1998  function warnAboutRenderPhaseUpdatesInDEV(fiber) {1999    {2000      if (isRendering && (executionContext & RenderContext) !== NoContext && !getIsUpdatingOpaqueValueInRenderPhaseInDEV()) {2001        switch (fiber.tag) {2002          case FunctionComponent:2003          case ForwardRef:2004          case SimpleMemoComponent:2005            {2006              var renderingComponentName = workInProgress && getComponentName(workInProgress.type) || 'Unknown'; // Dedupe by the rendering component because it's the one that needs to be fixed.2007              var dedupeKey = renderingComponentName;2008              if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {2009                didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);2010                var setStateComponentName = getComponentName(fiber.type) || 'Unknown';2011                error('Cannot update a component (`%s`) while rendering a ' + 'different component (`%s`). To locate the bad setState() call inside `%s`, ' + 'follow the stack trace as described in https://reactjs.org/link/setstate-in-render', setStateComponentName, renderingComponentName, renderingComponentName);2012              }2013              break;2014            }2015          case ClassComponent:2016            {2017              if (!didWarnAboutUpdateInRender) {2018                error('Cannot update during an existing state transition (such as ' + 'within `render`). Render methods should be a pure ' + 'function of props and state.');2019                didWarnAboutUpdateInRender = true;2020              }2021              break;2022            }2023        }2024      }2025    }2026  } // a 'shared' variable that changes when act() opens/closes in tests.2027  var IsThisRendererActing = {2028    current: false2029  };2030  function warnIfNotScopedWithMatchingAct(fiber) {2031    {2032      if ( IsSomeRendererActing.current === true && IsThisRendererActing.current !== true) {2033        var previousFiber = current;2034        try {2035          setCurrentFiber(fiber);2036          error("It looks like you're using the wrong act() around your test interactions.\n" + 'Be sure to use the matching version of act() corresponding to your renderer:\n\n' + '// for react-dom:\n' + // Break up imports to avoid accidentally parsing them as dependencies.2037          'import {act} fr' + "om 'react-dom/test-utils';\n" + '// ...\n' + 'act(() => ...);\n\n' + '// for react-test-renderer:\n' + // Break up imports to avoid accidentally parsing them as dependencies.2038          'import TestRenderer fr' + "om react-test-renderer';\n" + 'const {act} = TestRenderer;\n' + '// ...\n' + 'act(() => ...);');2039        } finally {2040          if (previousFiber) {2041            setCurrentFiber(fiber);2042          } else {2043            resetCurrentFiber();2044          }2045        }2046      }2047    }2048  }2049  function warnIfNotCurrentlyActingEffectsInDEV(fiber) {2050    {2051      if ( (fiber.mode & StrictMode) !== NoMode && IsSomeRendererActing.current === false && IsThisRendererActing.current === false) {2052        error('An update to %s ran an effect, but was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', getComponentName(fiber.type));2053      }2054    }2055  }2056  function warnIfNotCurrentlyActingUpdatesInDEV(fiber) {2057    {2058      if ( executionContext === NoContext && IsSomeRendererActing.current === false && IsThisRendererActing.current === false) {2059        var previousFiber = current;2060        try {2061          setCurrentFiber(fiber);2062          error('An update to %s inside a test was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', getComponentName(fiber.type));2063        } finally {2064          if (previousFiber) {2065            setCurrentFiber(fiber);2066          } else {2067            resetCurrentFiber();2068          }2069        }2070      }2071    }2072  }2073  var warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV; // In tests, we want to enforce a mocked scheduler.2074  var didWarnAboutUnmockedScheduler = false; // TODO Before we release concurrent mode, revisit this and decide whether a mocked2075  // scheduler is the actual recommendation. The alternative could be a testing build,2076  // a new lib, or whatever; we dunno just yet. This message is for early adopters2077  // to get their tests right.2078  function warnIfUnmockedScheduler(fiber) {2079    {2080      if (didWarnAboutUnmockedScheduler === false && unstable_flushAllWithoutAsserting === undefined) {2081        if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {2082          didWarnAboutUnmockedScheduler = true;2083          error('In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' + 'to guarantee consistent behaviour across tests and browsers. ' + 'For example, with jest: \n' + // Break up requires to avoid accidentally parsing them as dependencies.2084          "jest.mock('scheduler', () => require" + "('scheduler/unstable_mock'));\n\n" + 'For more info, visit https://reactjs.org/link/mock-scheduler');2085        }2086      }2087    }2088  }2089  function computeThreadID(root, lane) {2090    // Interaction threads are unique per root and expiration time.2091    // NOTE: Intentionally unsound cast. All that matters is that it's a number2092    // and it represents a batch of work. Could make a helper function instead,2093    // but meh this is fine for now.2094    return lane * 1000 + root.interactionThreadID;2095  }2096  function markSpawnedWork(lane) {2097    if (spawnedWorkDuringRender === null) {2098      spawnedWorkDuringRender = [lane];2099    } else {2100      spawnedWorkDuringRender.push(lane);2101    }2102  }2103  function scheduleInteractions(root, lane, interactions) {2104    if (interactions.size > 0) {2105      var pendingInteractionMap = root.pendingInteractionMap;2106      var pendingInteractions = pendingInteractionMap.get(lane);2107      if (pendingInteractions != null) {2108        interactions.forEach(function (interaction) {2109          if (!pendingInteractions.has(interaction)) {2110            // Update the pending async work count for previously unscheduled interaction.2111            interaction.__count++;2112          }2113          pendingInteractions.add(interaction);2114        });2115      } else {2116        pendingInteractionMap.set(lane, new Set(interactions)); // Update the pending async work count for the current interactions.2117        interactions.forEach(function (interaction) {2118          interaction.__count++;2119        });2120      }2121      var subscriber = __subscriberRef.current;2122      if (subscriber !== null) {2123        var threadID = computeThreadID(root, lane);2124        subscriber.onWorkScheduled(interactions, threadID);2125      }2126    }2127  }2128  function schedulePendingInteractions(root, lane) {2129    scheduleInteractions(root, lane, __interactionsRef.current);2130  }2131  function startWorkOnPendingInteractions(root, lanes) {2132    // we can accurately attribute time spent working on it, And so that cascading2133    // work triggered during the render phase will be associated with it.2134    var interactions = new Set();2135    root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledLane) {2136      if (includesSomeLane(lanes, scheduledLane)) {2137        scheduledInteractions.forEach(function (interaction) {2138          return interactions.add(interaction);2139        });2140      }2141    }); // Store the current set of interactions on the FiberRoot for a few reasons:2142    // We can re-use it in hot functions like performConcurrentWorkOnRoot()2143    // without having to recalculate it. We will also use it in commitWork() to2144    // pass to any Profiler onRender() hooks. This also provides DevTools with a2145    // way to access it when the onCommitRoot() hook is called....

ReactFiberWorkLoop.js

Source:ReactFiberWorkLoop.js

...216	// workInProgressRootCanSuspendUsingConfig = null;217	// workInProgressRootHasPendingPing = false;218}219//220function startWorkOnPendingInteractions() {221	const interactions = new Set();222}223// hooks åå³ç create224function commitBeforeMutationEffects() {225	while (nextEffect !== null) {226		if ((nextEffect.effectTag & Snapshot) !== NoEffect) {227			const current = nextEffect.alternate;228			commitBeforeMutationEffectOnFiber(current, nextEffect);229		}230		nextEffect = nextEffect.nextEffect;231	}232}233//234function commitMutationEffects(renderPriorityLevel) {235	while (nextEffect !== null) {236		const effectTag = nextEffect.effectTag;237		if (effectTag & ContentReset) {238			// TODO239		}240		if (effectTag & Ref) {241			// TODO242		}243		let primaryEffectTag = effectTag & (Placement | Update | Deletion);244		switch (primaryEffectTag) {245			case Placement: {246				commitPlacement(nextEffect);247				nextEffect.effectTag &= ~Placement;248				break;249			}250			case PlacementAndUpdate: {251				commitPlacement(nextEffect);252				nextEffect.effectTag &= ~Placement;253				const current = nextEffect.alternate;254				commitWork(current, nextEffect);255				break;256			}257			case Update: {258				const current = nextEffect.alternate;259				commitWork(current, nextEffect);260				break;261			}262		}263		nextEffect = nextEffect.nextEffect;264	}265}266function commitLayoutEffects(root, committedExpirationTime) {267	while (nextEffect !== null) {268		const effectTag = nextEffect.effectTag;269		if (effectTag & (Update | Callback)) {270			const current = nextEffect.alternate;271			commitLayoutEffectOnFiber(272				root,273				current,274				nextEffect,275				committedExpirationTime,276			);277		}278		if (effectTag & Ref) {279			// TODO280		}281		if (effectTag & Passive) {282			rootDoesHavePassiveEffects = true;283		}284		nextEffect = nextEffect.nextEffect;285	}286}287function commitRootImpl(root, renderPriorityLevel) {288	// flushPassiveEffects();289	const finishedWork = root.finishedWork;290	const expirationTime = root.finishedExpirationTime;291	if (finishedWork === null) {292		return null;293	}294	root.finishedWork = null;295	root.finishedExpirationTime = NoWork;296	root.callbackNode = null;297	root.callbackExpirationTime = NoWork;298	const updateExpirationTimeBeforeCommit = finishedWork.expirationTime;299	const childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;300	// TODO time mean?301	const firstPendingTimeBeforeCommit =302		childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit303			? childExpirationTimeBeforeCommit304			: updateExpirationTimeBeforeCommit;305	root.firstPendingTime = firstPendingTimeBeforeCommit;306	if (firstPendingTimeBeforeCommit < root.lastPendingTime) {307		root.lastPendingTime = firstPendingTimeBeforeCommit;308	}309	if (root === workInProgressRoot) {310		workInProgressRoot = null;311		workInProgress = null;312		renderExpirationTime = NoWork;313	} else {314		//315	}316	let firstEffect;317	if (finishedWork.effectTag > PerformedWork) {318		// ä¸ä¸ªfiberçeffectä»åå« ä»çchildrenç ä¸åå«ä»èªèº« å¦ærootèç¹æä¸ä¸ªeffect æä»¬éè¦æå®æ·»å å°effect list çå°¾é¨319		//320		if (finishedWork.lastEffect !== null) {321			finishedWork.lastEffect.nextEffect = finishedWork;322			firstEffect = finishedWork.firstEffect;323		} else {324			firstEffect = finishedWork;325		}326	} else {327		firstEffect = finishedWork.firstEffect;328	}329	if (firstEffect !== null) {330		const prevExecutionContext = executionContext;331		executionContext |= CommitContext;332		let prevInteractions = null;333		ReactCurrentOwner.current = null;334		prepareForCommit(root.containerInfo);335		nextEffect = firstEffect;336		do {337			try {338				commitBeforeMutationEffects();339			} catch (error) {340				console.error('error msg:', error);341				break;342			}343		} while (nextEffect !== null);344		// éæ°è®¾ç½®æ è®°ä½345		nextEffect = firstEffect;346		do {347			try {348				commitMutationEffects(renderPriorityLevel);349			} catch (error) {350				console.error('error msg', error);351				break;352			}353		} while (nextEffect !== null);354		// append355		nextEffect = firstEffect;356		root.current = finishedWork; // å°å®æå·¥ä½èµç»current357		do {358			try {359				commitLayoutEffects(root, expirationTime);360			} catch (error) {361				console.error('error msg', error);362				break;363			}364		} while (nextEffect !== null);365		nextEffect = null;366		executionContext = prevExecutionContext; // commité¶æ®µå®æ367	}368	// dev tools369	// onCommitRoot(finishedWork.stateNode, expirationTime)370	const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;371	if (rootDidHavePassiveEffects) {372		rootDoesHavePassiveEffects = false;373		rootWithPendingPassiveEffects = root;374		pendingPassiveEffectsExpirationTime = expirationTime;375		pendingPassiveEffectsRenderPriority = renderPriorityLevel;376	} else {377		while (nextEffect !== null) {378			const nextNextEffect = nextEffect.nextEffect;379			nextEffect.nextEffect = null;380			nextEffect = nextNextEffect;381		}382	}383	return null;384}385export function flushPassiveEffects() {386	if (rootWithPendingPassiveEffects === null) {387		return false;388	}389	const root = rootWithPendingPassiveEffects;390	const expirationTime = pendingPassiveEffectsExpirationTime;391	const renderPriorityLevel = pendingPassiveEffectsRenderPriority;392	rootWithPendingPassiveEffects = null;393	pendingPassiveEffectsExpirationTime = NoWork;394	pendingPassiveEffectsRenderPriority = NoPriority;395	const priorityLevel =396		renderPriorityLevel > NormalPriority397			? NormalPriority398			: renderPriorityLevel;399	return runWithPriority(400		priorityLevel,401		flushPassiveEffectsImpl.bind(null, root, expirationTime),402	);403}404function flushPassiveEffectsImpl(root, expirationTime) {405	let prevInteractions = null;406	const prevExecutionContext = executionContext;407	executionContext |= CommitContext;408	// å¤äºcommit é¶æ®µ409	let effect = root.current.firstEffect;410	while (effect !== null) {411		try {412			commitPassiveHookEffects(effect);413		} catch (error) {414			console.error(`commitPassiveHookEffects: ${error}`);415		}416		const nextNextEffect = effect.nextEffect;417		// Remove nextEffect pointer to assist GC418		effect.nextEffect = null;419		effect = nextNextEffect;420	}421	executionContext = prevExecutionContext;422	flushSyncCallbackQueue();423	nestedPassiveUpdateCount =424		rootWithPendingPassiveEffects === null425			? 0426			: nestedPassiveUpdateCount + 1;427	return true;428}429function commitRoot(root) {430	const renderPriorityLevel = getCurrentPriorityLevel();431	runWithPriority(432		ImmediatePriority,433		commitRootImpl.bind(null, root, renderPriorityLevel),434	);435	if (rootWithPendingPassiveEffects !== null) {436		scheduleCallback(NormalPriority, () => {437			flushPassiveEffects();438			return null;439		});440	}441	return null;442}443// åç½®æ¡ä»¶444// begin work åå»ºfiber æ è®°éè¦æ´æ°é¨å445function completeUnitOfWork(unitOfWork) {446	// è¯å¾å®æå½åçå·¥ä½ è½¬ç§»å°silbingå·¥ä½ å¦æ æ²¡æ åå¼èç¹åè¿åç¶èç¹447	workInProgress = unitOfWork;448	do {449		// å½å flushed fiberçstateé½æ¯alternateç çæ³æåµä¸ æ²¡æä»»ä½äºæéè¦ä¾èµè¿ä¸ª ä½æ¯ä¾èµè¿ä¸ªå°±æå³ç450		// å¨å·¥ä½è¿ç¨ä¸æä»¬éè¦é¢å¤çå·¥ä½451		const current = workInProgress.alternate;452		const returnFiber = workInProgress.return;453		// æ£æµæ¯å¦ææªå®æçå·¥ä½454		if ((workInProgress.effectTag & Incomplete) === NoEffect) {455			let next;456			setCurrentFiberInRecordStatus(workInProgress, 'completeWork');457			next = completeWork(current, workInProgress, renderExpirationTime);458			// if ((workInProgress.mode & ProfileMode) === NoMode) {459			// 	next = completeWork(460			// 		current,461			// 		workInProgress,462			// 		renderExpirationTime,463			// 	);464			// }465			if (next !== null) {466				return next;467			}468			if (469				returnFiber !== null &&470				(returnFiber.effectTag & Incomplete) === NoEffect471			) {472				// å°åèç¹çeffectListå½å¹¶å¾ç¶èç¹ä¸473				if (returnFiber.firstEffect === null) {474					returnFiber.firstEffect = workInProgress.firstEffect;475				}476				if (workInProgress.lastEffect !== null) {477					if (returnFiber.lastEffect !== null) {478						returnFiber.lastEffect.nextEffect =479							workInProgress.firstEffect;480					}481					returnFiber.lastEffect = workInProgress.firstEffect;482				}483				const effectTag = workInProgress.effectTag;484				if (effectTag > PerformedWork) {485					if (returnFiber.lastEffect !== null) {486						returnFiber.lastEffect.nextEffect = workInProgress;487					} else {488						returnFiber.firstEffect = workInProgress;489					}490					returnFiber.lastEffect = workInProgress;491				}492			}493		} else {494			// TODO unwindWork495		}496		const siblingFiber = workInProgress.sibling;497		if (siblingFiber !== null) {498			return siblingFiber;499		}500		workInProgress = returnFiber;501	} while (workInProgress !== null);502	// We've reached the root.503	if (workInProgressRootExitStatus === RootIncomplete) {504		workInProgressRootExitStatus = RootCompleted;505	}506	return null;507}508function performUnitOfWork(unitOfWork) {509	const current = unitOfWork.alternate;510	let next;511	// if (enableProfilerTimer) {512	//     // TODO513	// } else {514	//     next = beginWork(current, unitOfWork, renderExpirationTime)515	// }516	setCurrentFiberInRecordStatus(unitOfWork, 'beginWork');517	next = beginWork(current, unitOfWork, renderExpirationTime);518	unitOfWork.memoizedProps = unitOfWork.pendingProps;519	if (next === null) {520		setCurrentFiberInRecordStatus(unitOfWork, 'completeUnitOfWork');521		next = completeUnitOfWork(unitOfWork);522	}523	ReactCurrentOwner.current = null;524	return next;525}526function workLoopSync() {527	while (workInProgress !== null) {528		workInProgress = performUnitOfWork(workInProgress);529	}530}531function renderRoot(root, expirationTime, isSync) {532	if (root.firstPendingTime < expirationTime) {533		// å¦æå½åæ²¡æä»»å¡ åç«å³éåº534		// è¿ä¸ªåçäºå¤ä¸ªcbsä½ç¨ä¸ä¸ä¸ªroot æ´æ©çåè° flush åé¢çå·¥ä½535		return null;536	}537	if (isSync && root.finishedExpirationTime === expirationTime) {538		// todo ç¬¬ä¸æ¬¡æ²¡æfinishedExpirationTime539	}540	if (541		root !== workInProgressRoot ||542		expirationTime !== renderExpirationTime543	) {544		prepareFreshStack(root, expirationTime);545		// startWorkOnPendingInteractions(root, expirationTime)546	}547	if (workInProgress !== null) {548		const prevExecutionContext = executionContext;549		executionContext |= RenderContext;550		let prevDispatcher = ReactCurrentDispatcher.current;551		ReactCurrentDispatcher.current = ContextOnlyDispatcher;552		if (isSync) {553			if (expirationTime !== Sync) {554				// TODO555			} else {556				currentEventTime = NoWork;557			}558		}559		do {...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  await page.screenshot({ path: `example.png` });6  await browser.close();7})();8const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');9module.exports = {10  use: {11    viewport: { width: 1280, height: 720 },12    launchOptions: {13    },14  },15  plugins: {16    pauseOnFail: {17    },18    retryFailedStep: {19    },20    autoLogin: {21      users: {22        user: {23          login: async ({ page }) => {24            await page.fill('#username', 'admin');25            await page.fill('#password', 'admin');26            await page.click('text=Login');27          },28          check: async ({ page }) => {29            await page.waitForSelector('text=Logout');30          },31        },32      },33    },34    allure: {35    },36    stepByStepReport: {37    },38  },39  retryFailedStep: {

Using AI Code Generation

1const { startWorkOnPendingInteractions } = require('playwright/internal');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.click('text=Get started');8  await page.click('text=Docs');

Using AI Code Generation

1const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');2startWorkOnPendingInteractions();3const { stopWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');4stopWorkOnPendingInteractions();5const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');6startWorkOnPendingInteractions();7const { stopWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');8stopWorkOnPendingInteractions();9const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');10startWorkOnPendingInteractions();11const { stopWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');12stopWorkOnPendingInteractions();13const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');14startWorkOnPendingInteractions();15const { stopWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');16stopWorkOnPendingInteractions();17const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');18startWorkOnPendingInteractions();19const { stopWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');20stopWorkOnPendingInteractions();21const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');22startWorkOnPendingInteractions();

Using AI Code Generation

1const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');2startWorkOnPendingInteractions();3const { endWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');4endWorkOnPendingInteractions();5const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');6startWorkOnPendingInteractions();7const { endWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');8endWorkOnPendingInteractions();9const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');10startWorkOnPendingInteractions();11const { endWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');12endWorkOnPendingInteractions();13const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');14startWorkOnPendingInteractions();15const { endWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');16endWorkOnPendingInteractions();17const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');18startWorkOnPendingInteractions();19const { endWorkOnPendingInteractions } = require('playwright/lib/internal/inspectorInstrumentation');20endWorkOnPendingInteractions();21const { startWorkOnPendingInteractions } = require('playwright/lib/internal/ins

Using AI Code Generation

1const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');2startWorkOnPendingInteractions();3const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');4startWorkOnPendingInteractions();5const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');6startWorkOnPendingInteractions();7const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');8startWorkOnPendingInteractions();9const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');10startWorkOnPendingInteractions();11const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');12startWorkOnPendingInteractions();13const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');14startWorkOnPendingInteractions();15const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');16startWorkOnPendingInteractions();17const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');18startWorkOnPendingInteractions();19const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');20startWorkOnPendingInteractions();21const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');22startWorkOnPendingInteractions();23const { startWorkOnPendingInteractions } = require('playwright/lib/internal/inspector');

Using AI Code Generation

1const { Playwright } = require('playwright');2const { startWorkOnPendingInteractions } = Playwright.internalAPI;3startWorkOnPendingInteractions();4const { test } = require('@playwright/test');5test('test', async ({ page }) => {6  await page.click('input');

Using AI Code Generation

1import { startWorkOnPendingInteractions } from 'playwright/lib/internal/inspector';2startWorkOnPendingInteractions();3const { test, expect } = require('@playwright/test');4test('test', async ({ page }) => {5  await page.click('text=Get Started');6  await page.click('text=Changelog');7  await page.click('text=Docs');8  await page.click('text=Blog');9  await page.click('text=Get Started');10  await page.click('text=Changelog');11  await page.click('text=Docs');12  await page.click('text=Blog');13  await page.click('text=Get Started');14  await page.click('text=Changelog');15  await page.click('text=Docs');16  await page.click('text=Blog');17  await page.click('text=Get Started');18  await page.click('text=Changelog');19  await page.click('text=Docs');20  await page.click('text=Blog');21  await page.click('text=Get Started');22  await page.click('text=Changelog');23  await page.click('text=Docs');24  await page.click('text=Blog');25  await page.click('text=Get Started');26  await page.click('text=Changelog');27  await page.click('text=Docs');28  await page.click('text=Blog');29  await page.click('text=Get Started');30  await page.click('text=Changelog');31  await page.click('text=Docs');32  await page.click('text=Blog');33  await page.click('text=Get Started');34  await page.click('text=Changelog');35  await page.click('text=Docs');36  await page.click('text=Blog');37  await page.click('text=Get Started');38  await page.click('text=Changelog');39  await page.click('text=Docs');40  await page.click('text=Blog');41  await page.click('text=Get Started');42  await page.click('text=Changelog');43  await page.click('text=Docs');44  await page.click('text=Blog');45  await page.click('text=Get Started');46  await page.click('text=Changelog');47  await page.click('text=Docs');

Using AI Code Generation

1const { startWorkOnPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');2const { stopWorkOnPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');3const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');4const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');5const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');6const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');7const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');8const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');9const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');10const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');11const { getPendingInteractions } = require('playwright-core/lib/server/trace/recorder/recorderApp');

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.