Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use updateLayoutEffect method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberHooks.new.js

Source:ReactFiberHooks.new.js

...1142  } else {1143    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);1144  }1145}1146function updateLayoutEffect(1147  create                           ,1148  deps                            ,1149)       {1150  return updateEffectImpl(UpdateEffect, HookLayout, create, deps);1151}1152function imperativeHandleEffect   (1153  create         ,1154  ref                                                                   ,1155) {1156  if (typeof ref === 'function') {1157    const refCallback = ref;1158    const inst = create();1159    refCallback(inst);1160    return () => {1161      refCallback(null);1162    };1163  } else if (ref !== null && ref !== undefined) {1164    const refObject = ref;1165    if (__DEV__) {1166      if (!refObject.hasOwnProperty('current')) {1167        console.error(1168          'Expected useImperativeHandle() first argument to either be a ' +1169            'ref callback or React.createRef() object. Instead received: %s.',1170          'an object with keys {' + Object.keys(refObject).join(', ') + '}',1171        );1172      }1173    }1174    const inst = create();1175    refObject.current = inst;1176    return () => {1177      refObject.current = null;1178    };1179  }1180}1181function mountImperativeHandle   (1182  ref                                                                   ,1183  create         ,1184  deps                            ,1185)       {1186  if (__DEV__) {1187    if (typeof create !== 'function') {1188      console.error(1189        'Expected useImperativeHandle() second argument to be a function ' +1190          'that creates a handle. Instead received: %s.',1191        create !== null ? typeof create : 'null',1192      );1193    }1194  }1195  // TODO: If deps are provided, should we skip comparing the ref itself?1196  const effectDeps =1197    deps !== null && deps !== undefined ? deps.concat([ref]) : null;1198  if (__DEV__ && enableDoubleInvokingEffects) {1199    return mountEffectImpl(1200      MountLayoutDevEffect | UpdateEffect,1201      HookLayout,1202      imperativeHandleEffect.bind(null, create, ref),1203      effectDeps,1204    );1205  } else {1206    return mountEffectImpl(1207      UpdateEffect,1208      HookLayout,1209      imperativeHandleEffect.bind(null, create, ref),1210      effectDeps,1211    );1212  }1213}1214function updateImperativeHandle   (1215  ref                                                                   ,1216  create         ,1217  deps                            ,1218)       {1219  if (__DEV__) {1220    if (typeof create !== 'function') {1221      console.error(1222        'Expected useImperativeHandle() second argument to be a function ' +1223          'that creates a handle. Instead received: %s.',1224        create !== null ? typeof create : 'null',1225      );1226    }1227  }1228  // TODO: If deps are provided, should we skip comparing the ref itself?1229  const effectDeps =1230    deps !== null && deps !== undefined ? deps.concat([ref]) : null;1231  return updateEffectImpl(1232    UpdateEffect,1233    HookLayout,1234    imperativeHandleEffect.bind(null, create, ref),1235    effectDeps,1236  );1237}1238function mountDebugValue   (value   , formatterFn                      )       {1239  // This hook is normally a no-op.1240  // The react-debug-hooks package injects its own implementation1241  // so that e.g. DevTools can display custom hook values.1242}1243const updateDebugValue = mountDebugValue;1244function mountCallback   (callback   , deps                            )    {1245  const hook = mountWorkInProgressHook();1246  const nextDeps = deps === undefined ? null : deps;1247  hook.memoizedState = [callback, nextDeps];1248  return callback;1249}1250function updateCallback   (callback   , deps                            )    {1251  const hook = updateWorkInProgressHook();1252  const nextDeps = deps === undefined ? null : deps;1253  const prevState = hook.memoizedState;1254  if (prevState !== null) {1255    if (nextDeps !== null) {1256      const prevDeps                      = prevState[1];1257      if (areHookInputsEqual(nextDeps, prevDeps)) {1258        return prevState[0];1259      }1260    }1261  }1262  hook.memoizedState = [callback, nextDeps];1263  return callback;1264}1265function mountMemo   (1266  nextCreate         ,1267  deps                            ,1268)    {1269  const hook = mountWorkInProgressHook();1270  const nextDeps = deps === undefined ? null : deps;1271  const nextValue = nextCreate();1272  hook.memoizedState = [nextValue, nextDeps];1273  return nextValue;1274}1275function updateMemo   (1276  nextCreate         ,1277  deps                            ,1278)    {1279  const hook = updateWorkInProgressHook();1280  const nextDeps = deps === undefined ? null : deps;1281  const prevState = hook.memoizedState;1282  if (prevState !== null) {1283    // Assume these are defined. If they're not, areHookInputsEqual will warn.1284    if (nextDeps !== null) {1285      const prevDeps                      = prevState[1];1286      if (areHookInputsEqual(nextDeps, prevDeps)) {1287        return prevState[0];1288      }1289    }1290  }1291  const nextValue = nextCreate();1292  hook.memoizedState = [nextValue, nextDeps];1293  return nextValue;1294}1295function mountDeferredValue   (value   )    {1296  const [prevValue, setValue] = mountState(value);1297  mountEffect(() => {1298    const prevTransition = ReactCurrentBatchConfig.transition;1299    ReactCurrentBatchConfig.transition = 1;1300    try {1301      setValue(value);1302    } finally {1303      ReactCurrentBatchConfig.transition = prevTransition;1304    }1305  }, [value]);1306  return prevValue;1307}1308function updateDeferredValue   (value   )    {1309  const [prevValue, setValue] = updateState(value);1310  updateEffect(() => {1311    const prevTransition = ReactCurrentBatchConfig.transition;1312    ReactCurrentBatchConfig.transition = 1;1313    try {1314      setValue(value);1315    } finally {1316      ReactCurrentBatchConfig.transition = prevTransition;1317    }1318  }, [value]);1319  return prevValue;1320}1321function rerenderDeferredValue   (value   )    {1322  const [prevValue, setValue] = rerenderState(value);1323  updateEffect(() => {1324    const prevTransition = ReactCurrentBatchConfig.transition;1325    ReactCurrentBatchConfig.transition = 1;1326    try {1327      setValue(value);1328    } finally {1329      ReactCurrentBatchConfig.transition = prevTransition;1330    }1331  }, [value]);1332  return prevValue;1333}1334function startTransition(setPending, callback) {1335  const priorityLevel = getCurrentPriorityLevel();1336  if (decoupleUpdatePriorityFromScheduler) {1337    const previousLanePriority = getCurrentUpdateLanePriority();1338    setCurrentUpdateLanePriority(1339      higherLanePriority(previousLanePriority, InputContinuousLanePriority),1340    );1341    runWithPriority(1342      priorityLevel < UserBlockingPriority1343        ? UserBlockingPriority1344        : priorityLevel,1345      () => {1346        setPending(true);1347      },1348    );1349    // TODO: Can remove this. Was only necessary because we used to give1350    // different behavior to transitions without a config object. Now they are1351    // all treated the same.1352    setCurrentUpdateLanePriority(DefaultLanePriority);1353    runWithPriority(1354      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,1355      () => {1356        const prevTransition = ReactCurrentBatchConfig.transition;1357        ReactCurrentBatchConfig.transition = 1;1358        try {1359          setPending(false);1360          callback();1361        } finally {1362          if (decoupleUpdatePriorityFromScheduler) {1363            setCurrentUpdateLanePriority(previousLanePriority);1364          }1365          ReactCurrentBatchConfig.transition = prevTransition;1366        }1367      },1368    );1369  } else {1370    runWithPriority(1371      priorityLevel < UserBlockingPriority1372        ? UserBlockingPriority1373        : priorityLevel,1374      () => {1375        setPending(true);1376      },1377    );1378    runWithPriority(1379      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,1380      () => {1381        const prevTransition = ReactCurrentBatchConfig.transition;1382        ReactCurrentBatchConfig.transition = 1;1383        try {1384          setPending(false);1385          callback();1386        } finally {1387          ReactCurrentBatchConfig.transition = prevTransition;1388        }1389      },1390    );1391  }1392}1393function mountTransition()                                  {1394  const [isPending, setPending] = mountState(false);1395  // The `start` method can be stored on a ref, since `setPending`1396  // never changes.1397  const start = startTransition.bind(null, setPending);1398  mountRef(start);1399  return [start, isPending];1400}1401function updateTransition()                                  {1402  const [isPending] = updateState(false);1403  const startRef = updateRef();1404  const start                       = (startRef.current     );1405  return [start, isPending];1406}1407function rerenderTransition()                                  {1408  const [isPending] = rerenderState(false);1409  const startRef = updateRef();1410  const start                       = (startRef.current     );1411  return [start, isPending];1412}1413let isUpdatingOpaqueValueInRenderPhase = false;1414export function getIsUpdatingOpaqueValueInRenderPhaseInDEV()                 {1415  if (__DEV__) {1416    return isUpdatingOpaqueValueInRenderPhase;1417  }1418}1419function warnOnOpaqueIdentifierAccessInDEV(fiber) {1420  if (__DEV__) {1421    // TODO: Should warn in effects and callbacks, too1422    const name = getComponentName(fiber.type) || 'Unknown';1423    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {1424      console.error(1425        'The object passed back from useOpaqueIdentifier is meant to be ' +1426          'passed through to attributes only. Do not read the ' +1427          'value directly.',1428      );1429      didWarnAboutUseOpaqueIdentifier[name] = true;1430    }1431  }1432}1433function mountOpaqueIdentifier()                      {1434  const makeId = __DEV__1435    ? makeClientIdInDEV.bind(1436        null,1437        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),1438      )1439    : makeClientId;1440  if (getIsHydrating()) {1441    let didUpgrade = false;1442    const fiber = currentlyRenderingFiber;1443    const readValue = () => {1444      if (!didUpgrade) {1445        // Only upgrade once. This works even inside the render phase because1446        // the update is added to a shared queue, which outlasts the1447        // in-progress render.1448        didUpgrade = true;1449        if (__DEV__) {1450          isUpdatingOpaqueValueInRenderPhase = true;1451          setId(makeId());1452          isUpdatingOpaqueValueInRenderPhase = false;1453          warnOnOpaqueIdentifierAccessInDEV(fiber);1454        } else {1455          setId(makeId());1456        }1457      }1458      invariant(1459        false,1460        'The object passed back from useOpaqueIdentifier is meant to be ' +1461          'passed through to attributes only. Do not read the value directly.',1462      );1463    };1464    const id = makeOpaqueHydratingObject(readValue);1465    const setId = mountState(id)[1];1466    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {1467      if (__DEV__ && enableDoubleInvokingEffects) {1468        currentlyRenderingFiber.flags |=1469          MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect;1470      } else {1471        currentlyRenderingFiber.flags |= PassiveEffect | PassiveStaticEffect;1472      }1473      pushEffect(1474        HookHasEffect | HookPassive,1475        () => {1476          setId(makeId());1477        },1478        undefined,1479        null,1480      );1481    }1482    return id;1483  } else {1484    const id = makeId();1485    mountState(id);1486    return id;1487  }1488}1489function updateOpaqueIdentifier()                      {1490  const id = updateState(undefined)[0];1491  return id;1492}1493function rerenderOpaqueIdentifier()                      {1494  const id = rerenderState(undefined)[0];1495  return id;1496}1497function dispatchAction      (1498  fiber       ,1499  queue                   ,1500  action   ,1501) {1502  if (__DEV__) {1503    if (typeof arguments[3] === 'function') {1504      console.error(1505        "State updates from the useState() and useReducer() Hooks don't support the " +1506          'second callback argument. To execute a side effect after ' +1507          'rendering, declare it in the component body with useEffect().',1508      );1509    }1510  }1511  const eventTime = requestEventTime();1512  const lane = requestUpdateLane(fiber);1513  const update               = {1514    lane,1515    action,1516    eagerReducer: null,1517    eagerState: null,1518    next: (null     ),1519  };1520  // Append the update to the end of the list.1521  const pending = queue.pending;1522  if (pending === null) {1523    // This is the first update. Create a circular list.1524    update.next = update;1525  } else {1526    update.next = pending.next;1527    pending.next = update;1528  }1529  queue.pending = update;1530  const alternate = fiber.alternate;1531  if (1532    fiber === currentlyRenderingFiber ||1533    (alternate !== null && alternate === currentlyRenderingFiber)1534  ) {1535    // This is a render phase update. Stash it in a lazily-created map of1536    // queue -> linked list of updates. After this render pass, we'll restart1537    // and apply the stashed updates on top of the work-in-progress hook.1538    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;1539  } else {1540    if (1541      fiber.lanes === NoLanes &&1542      (alternate === null || alternate.lanes === NoLanes)1543    ) {1544      // The queue is currently empty, which means we can eagerly compute the1545      // next state before entering the render phase. If the new state is the1546      // same as the current state, we may be able to bail out entirely.1547      const lastRenderedReducer = queue.lastRenderedReducer;1548      if (lastRenderedReducer !== null) {1549        let prevDispatcher;1550        if (__DEV__) {1551          prevDispatcher = ReactCurrentDispatcher.current;1552          ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1553        }1554        try {1555          const currentState    = (queue.lastRenderedState     );1556          const eagerState = lastRenderedReducer(currentState, action);1557          // Stash the eagerly computed state, and the reducer used to compute1558          // it, on the update object. If the reducer hasn't changed by the1559          // time we enter the render phase, then the eager state can be used1560          // without calling the reducer again.1561          update.eagerReducer = lastRenderedReducer;1562          update.eagerState = eagerState;1563          if (is(eagerState, currentState)) {1564            // Fast path. We can bail out without scheduling React to re-render.1565            // It's still possible that we'll need to rebase this update later,1566            // if the component re-renders for a different reason and by that1567            // time the reducer has changed.1568            return;1569          }1570        } catch (error) {1571          // Suppress the error. It will throw again in the render phase.1572        } finally {1573          if (__DEV__) {1574            ReactCurrentDispatcher.current = prevDispatcher;1575          }1576        }1577      }1578    }1579    if (__DEV__) {1580      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests1581      if (typeof jest !== 'undefined') {1582        warnIfNotScopedWithMatchingAct(fiber);1583        warnIfNotCurrentlyActingUpdatesInDev(fiber);1584      }1585    }1586    scheduleUpdateOnFiber(fiber, lane, eventTime);1587  }1588  if (__DEV__) {1589    if (enableDebugTracing) {1590      if (fiber.mode & DebugTracingMode) {1591        const name = getComponentName(fiber.type) || 'Unknown';1592        logStateUpdateScheduled(name, lane, action);1593      }1594    }1595  }1596  if (enableSchedulingProfiler) {1597    markStateUpdateScheduled(fiber, lane);1598  }1599}1600export const ContextOnlyDispatcher             = {1601  readContext,1602  useCallback: throwInvalidHookError,1603  useContext: throwInvalidHookError,1604  useEffect: throwInvalidHookError,1605  useImperativeHandle: throwInvalidHookError,1606  useLayoutEffect: throwInvalidHookError,1607  useMemo: throwInvalidHookError,1608  useReducer: throwInvalidHookError,1609  useRef: throwInvalidHookError,1610  useState: throwInvalidHookError,1611  useDebugValue: throwInvalidHookError,1612  useDeferredValue: throwInvalidHookError,1613  useTransition: throwInvalidHookError,1614  useMutableSource: throwInvalidHookError,1615  useOpaqueIdentifier: throwInvalidHookError,1616  unstable_isNewReconciler: enableNewReconciler,1617};1618const HooksDispatcherOnMount             = {1619  readContext,1620  useCallback: mountCallback,1621  useContext: readContext,1622  useEffect: mountEffect,1623  useImperativeHandle: mountImperativeHandle,1624  useLayoutEffect: mountLayoutEffect,1625  useMemo: mountMemo,1626  useReducer: mountReducer,1627  useRef: mountRef,1628  useState: mountState,1629  useDebugValue: mountDebugValue,1630  useDeferredValue: mountDeferredValue,1631  useTransition: mountTransition,1632  useMutableSource: mountMutableSource,1633  useOpaqueIdentifier: mountOpaqueIdentifier,1634  unstable_isNewReconciler: enableNewReconciler,1635};1636const HooksDispatcherOnUpdate             = {1637  readContext,1638  useCallback: updateCallback,1639  useContext: readContext,1640  useEffect: updateEffect,1641  useImperativeHandle: updateImperativeHandle,1642  useLayoutEffect: updateLayoutEffect,1643  useMemo: updateMemo,1644  useReducer: updateReducer,1645  useRef: updateRef,1646  useState: updateState,1647  useDebugValue: updateDebugValue,1648  useDeferredValue: updateDeferredValue,1649  useTransition: updateTransition,1650  useMutableSource: updateMutableSource,1651  useOpaqueIdentifier: updateOpaqueIdentifier,1652  unstable_isNewReconciler: enableNewReconciler,1653};1654const HooksDispatcherOnRerender             = {1655  readContext,1656  useCallback: updateCallback,1657  useContext: readContext,1658  useEffect: updateEffect,1659  useImperativeHandle: updateImperativeHandle,1660  useLayoutEffect: updateLayoutEffect,1661  useMemo: updateMemo,1662  useReducer: rerenderReducer,1663  useRef: updateRef,1664  useState: rerenderState,1665  useDebugValue: updateDebugValue,1666  useDeferredValue: rerenderDeferredValue,1667  useTransition: rerenderTransition,1668  useMutableSource: updateMutableSource,1669  useOpaqueIdentifier: rerenderOpaqueIdentifier,1670  unstable_isNewReconciler: enableNewReconciler,1671};1672let HooksDispatcherOnMountInDEV                    = null;1673let HooksDispatcherOnMountWithHookTypesInDEV                    = null;1674let HooksDispatcherOnUpdateInDEV                    = null;1675let HooksDispatcherOnRerenderInDEV                    = null;1676let InvalidNestedHooksDispatcherOnMountInDEV                    = null;1677let InvalidNestedHooksDispatcherOnUpdateInDEV                    = null;1678let InvalidNestedHooksDispatcherOnRerenderInDEV                    = null;1679if (__DEV__) {1680  const warnInvalidContextAccess = () => {1681    console.error(1682      'Context can only be read while React is rendering. ' +1683        'In classes, you can read it in the render method or getDerivedStateFromProps. ' +1684        'In function components, you can read it directly in the function body, but not ' +1685        'inside Hooks like useReducer() or useMemo().',1686    );1687  };1688  const warnInvalidHookAccess = () => {1689    console.error(1690      'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +1691        'You can only call Hooks at the top level of your React function. ' +1692        'For more information, see ' +1693        'https://reactjs.org/link/rules-of-hooks',1694    );1695  };1696  HooksDispatcherOnMountInDEV = {1697    readContext   (1698      context                 ,1699      observedBits                         ,1700    )    {1701      return readContext(context, observedBits);1702    },1703    useCallback   (callback   , deps                            )    {1704      currentHookNameInDev = 'useCallback';1705      mountHookTypesDev();1706      checkDepsAreArrayDev(deps);1707      return mountCallback(callback, deps);1708    },1709    useContext   (1710      context                 ,1711      observedBits                         ,1712    )    {1713      currentHookNameInDev = 'useContext';1714      mountHookTypesDev();1715      return readContext(context, observedBits);1716    },1717    useEffect(1718      create                           ,1719      deps                            ,1720    )       {1721      currentHookNameInDev = 'useEffect';1722      mountHookTypesDev();1723      checkDepsAreArrayDev(deps);1724      return mountEffect(create, deps);1725    },1726    useImperativeHandle   (1727      ref                                                                   ,1728      create         ,1729      deps                            ,1730    )       {1731      currentHookNameInDev = 'useImperativeHandle';1732      mountHookTypesDev();1733      checkDepsAreArrayDev(deps);1734      return mountImperativeHandle(ref, create, deps);1735    },1736    useLayoutEffect(1737      create                           ,1738      deps                            ,1739    )       {1740      currentHookNameInDev = 'useLayoutEffect';1741      mountHookTypesDev();1742      checkDepsAreArrayDev(deps);1743      return mountLayoutEffect(create, deps);1744    },1745    useMemo   (create         , deps                            )    {1746      currentHookNameInDev = 'useMemo';1747      mountHookTypesDev();1748      checkDepsAreArrayDev(deps);1749      const prevDispatcher = ReactCurrentDispatcher.current;1750      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1751      try {1752        return mountMemo(create, deps);1753      } finally {1754        ReactCurrentDispatcher.current = prevDispatcher;1755      }1756    },1757    useReducer         (1758      reducer             ,1759      initialArg   ,1760      init         ,1761    )                   {1762      currentHookNameInDev = 'useReducer';1763      mountHookTypesDev();1764      const prevDispatcher = ReactCurrentDispatcher.current;1765      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1766      try {1767        return mountReducer(reducer, initialArg, init);1768      } finally {1769        ReactCurrentDispatcher.current = prevDispatcher;1770      }1771    },1772    useRef   (initialValue   )                 {1773      currentHookNameInDev = 'useRef';1774      mountHookTypesDev();1775      return mountRef(initialValue);1776    },1777    useState   (1778      initialState               ,1779    )                                     {1780      currentHookNameInDev = 'useState';1781      mountHookTypesDev();1782      const prevDispatcher = ReactCurrentDispatcher.current;1783      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1784      try {1785        return mountState(initialState);1786      } finally {1787        ReactCurrentDispatcher.current = prevDispatcher;1788      }1789    },1790    useDebugValue   (value   , formatterFn                      )       {1791      currentHookNameInDev = 'useDebugValue';1792      mountHookTypesDev();1793      return mountDebugValue(value, formatterFn);1794    },1795    useDeferredValue   (value   )    {1796      currentHookNameInDev = 'useDeferredValue';1797      mountHookTypesDev();1798      return mountDeferredValue(value);1799    },1800    useTransition()                                  {1801      currentHookNameInDev = 'useTransition';1802      mountHookTypesDev();1803      return mountTransition();1804    },1805    useMutableSource                  (1806      source                       ,1807      getSnapshot                                              ,1808      subscribe                                            ,1809    )           {1810      currentHookNameInDev = 'useMutableSource';1811      mountHookTypesDev();1812      return mountMutableSource(source, getSnapshot, subscribe);1813    },1814    useOpaqueIdentifier()                      {1815      currentHookNameInDev = 'useOpaqueIdentifier';1816      mountHookTypesDev();1817      return mountOpaqueIdentifier();1818    },1819    unstable_isNewReconciler: enableNewReconciler,1820  };1821  HooksDispatcherOnMountWithHookTypesInDEV = {1822    readContext   (1823      context                 ,1824      observedBits                         ,1825    )    {1826      return readContext(context, observedBits);1827    },1828    useCallback   (callback   , deps                            )    {1829      currentHookNameInDev = 'useCallback';1830      updateHookTypesDev();1831      return mountCallback(callback, deps);1832    },1833    useContext   (1834      context                 ,1835      observedBits                         ,1836    )    {1837      currentHookNameInDev = 'useContext';1838      updateHookTypesDev();1839      return readContext(context, observedBits);1840    },1841    useEffect(1842      create                           ,1843      deps                            ,1844    )       {1845      currentHookNameInDev = 'useEffect';1846      updateHookTypesDev();1847      return mountEffect(create, deps);1848    },1849    useImperativeHandle   (1850      ref                                                                   ,1851      create         ,1852      deps                            ,1853    )       {1854      currentHookNameInDev = 'useImperativeHandle';1855      updateHookTypesDev();1856      return mountImperativeHandle(ref, create, deps);1857    },1858    useLayoutEffect(1859      create                           ,1860      deps                            ,1861    )       {1862      currentHookNameInDev = 'useLayoutEffect';1863      updateHookTypesDev();1864      return mountLayoutEffect(create, deps);1865    },1866    useMemo   (create         , deps                            )    {1867      currentHookNameInDev = 'useMemo';1868      updateHookTypesDev();1869      const prevDispatcher = ReactCurrentDispatcher.current;1870      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1871      try {1872        return mountMemo(create, deps);1873      } finally {1874        ReactCurrentDispatcher.current = prevDispatcher;1875      }1876    },1877    useReducer         (1878      reducer             ,1879      initialArg   ,1880      init         ,1881    )                   {1882      currentHookNameInDev = 'useReducer';1883      updateHookTypesDev();1884      const prevDispatcher = ReactCurrentDispatcher.current;1885      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1886      try {1887        return mountReducer(reducer, initialArg, init);1888      } finally {1889        ReactCurrentDispatcher.current = prevDispatcher;1890      }1891    },1892    useRef   (initialValue   )                 {1893      currentHookNameInDev = 'useRef';1894      updateHookTypesDev();1895      return mountRef(initialValue);1896    },1897    useState   (1898      initialState               ,1899    )                                     {1900      currentHookNameInDev = 'useState';1901      updateHookTypesDev();1902      const prevDispatcher = ReactCurrentDispatcher.current;1903      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1904      try {1905        return mountState(initialState);1906      } finally {1907        ReactCurrentDispatcher.current = prevDispatcher;1908      }1909    },1910    useDebugValue   (value   , formatterFn                      )       {1911      currentHookNameInDev = 'useDebugValue';1912      updateHookTypesDev();1913      return mountDebugValue(value, formatterFn);1914    },1915    useDeferredValue   (value   )    {1916      currentHookNameInDev = 'useDeferredValue';1917      updateHookTypesDev();1918      return mountDeferredValue(value);1919    },1920    useTransition()                                  {1921      currentHookNameInDev = 'useTransition';1922      updateHookTypesDev();1923      return mountTransition();1924    },1925    useMutableSource                  (1926      source                       ,1927      getSnapshot                                              ,1928      subscribe                                            ,1929    )           {1930      currentHookNameInDev = 'useMutableSource';1931      updateHookTypesDev();1932      return mountMutableSource(source, getSnapshot, subscribe);1933    },1934    useOpaqueIdentifier()                      {1935      currentHookNameInDev = 'useOpaqueIdentifier';1936      updateHookTypesDev();1937      return mountOpaqueIdentifier();1938    },1939    unstable_isNewReconciler: enableNewReconciler,1940  };1941  HooksDispatcherOnUpdateInDEV = {1942    readContext   (1943      context                 ,1944      observedBits                         ,1945    )    {1946      return readContext(context, observedBits);1947    },1948    useCallback   (callback   , deps                            )    {1949      currentHookNameInDev = 'useCallback';1950      updateHookTypesDev();1951      return updateCallback(callback, deps);1952    },1953    useContext   (1954      context                 ,1955      observedBits                         ,1956    )    {1957      currentHookNameInDev = 'useContext';1958      updateHookTypesDev();1959      return readContext(context, observedBits);1960    },1961    useEffect(1962      create                           ,1963      deps                            ,1964    )       {1965      currentHookNameInDev = 'useEffect';1966      updateHookTypesDev();1967      return updateEffect(create, deps);1968    },1969    useImperativeHandle   (1970      ref                                                                   ,1971      create         ,1972      deps                            ,1973    )       {1974      currentHookNameInDev = 'useImperativeHandle';1975      updateHookTypesDev();1976      return updateImperativeHandle(ref, create, deps);1977    },1978    useLayoutEffect(1979      create                           ,1980      deps                            ,1981    )       {1982      currentHookNameInDev = 'useLayoutEffect';1983      updateHookTypesDev();1984      return updateLayoutEffect(create, deps);1985    },1986    useMemo   (create         , deps                            )    {1987      currentHookNameInDev = 'useMemo';1988      updateHookTypesDev();1989      const prevDispatcher = ReactCurrentDispatcher.current;1990      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1991      try {1992        return updateMemo(create, deps);1993      } finally {1994        ReactCurrentDispatcher.current = prevDispatcher;1995      }1996    },1997    useReducer         (1998      reducer             ,1999      initialArg   ,2000      init         ,2001    )                   {2002      currentHookNameInDev = 'useReducer';2003      updateHookTypesDev();2004      const prevDispatcher = ReactCurrentDispatcher.current;2005      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2006      try {2007        return updateReducer(reducer, initialArg, init);2008      } finally {2009        ReactCurrentDispatcher.current = prevDispatcher;2010      }2011    },2012    useRef   (initialValue   )                 {2013      currentHookNameInDev = 'useRef';2014      updateHookTypesDev();2015      return updateRef(initialValue);2016    },2017    useState   (2018      initialState               ,2019    )                                     {2020      currentHookNameInDev = 'useState';2021      updateHookTypesDev();2022      const prevDispatcher = ReactCurrentDispatcher.current;2023      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2024      try {2025        return updateState(initialState);2026      } finally {2027        ReactCurrentDispatcher.current = prevDispatcher;2028      }2029    },2030    useDebugValue   (value   , formatterFn                      )       {2031      currentHookNameInDev = 'useDebugValue';2032      updateHookTypesDev();2033      return updateDebugValue(value, formatterFn);2034    },2035    useDeferredValue   (value   )    {2036      currentHookNameInDev = 'useDeferredValue';2037      updateHookTypesDev();2038      return updateDeferredValue(value);2039    },2040    useTransition()                                  {2041      currentHookNameInDev = 'useTransition';2042      updateHookTypesDev();2043      return updateTransition();2044    },2045    useMutableSource                  (2046      source                       ,2047      getSnapshot                                              ,2048      subscribe                                            ,2049    )           {2050      currentHookNameInDev = 'useMutableSource';2051      updateHookTypesDev();2052      return updateMutableSource(source, getSnapshot, subscribe);2053    },2054    useOpaqueIdentifier()                      {2055      currentHookNameInDev = 'useOpaqueIdentifier';2056      updateHookTypesDev();2057      return updateOpaqueIdentifier();2058    },2059    unstable_isNewReconciler: enableNewReconciler,2060  };2061  HooksDispatcherOnRerenderInDEV = {2062    readContext   (2063      context                 ,2064      observedBits                         ,2065    )    {2066      return readContext(context, observedBits);2067    },2068    useCallback   (callback   , deps                            )    {2069      currentHookNameInDev = 'useCallback';2070      updateHookTypesDev();2071      return updateCallback(callback, deps);2072    },2073    useContext   (2074      context                 ,2075      observedBits                         ,2076    )    {2077      currentHookNameInDev = 'useContext';2078      updateHookTypesDev();2079      return readContext(context, observedBits);2080    },2081    useEffect(2082      create                           ,2083      deps                            ,2084    )       {2085      currentHookNameInDev = 'useEffect';2086      updateHookTypesDev();2087      return updateEffect(create, deps);2088    },2089    useImperativeHandle   (2090      ref                                                                   ,2091      create         ,2092      deps                            ,2093    )       {2094      currentHookNameInDev = 'useImperativeHandle';2095      updateHookTypesDev();2096      return updateImperativeHandle(ref, create, deps);2097    },2098    useLayoutEffect(2099      create                           ,2100      deps                            ,2101    )       {2102      currentHookNameInDev = 'useLayoutEffect';2103      updateHookTypesDev();2104      return updateLayoutEffect(create, deps);2105    },2106    useMemo   (create         , deps                            )    {2107      currentHookNameInDev = 'useMemo';2108      updateHookTypesDev();2109      const prevDispatcher = ReactCurrentDispatcher.current;2110      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2111      try {2112        return updateMemo(create, deps);2113      } finally {2114        ReactCurrentDispatcher.current = prevDispatcher;2115      }2116    },2117    useReducer         (2118      reducer             ,2119      initialArg   ,2120      init         ,2121    )                   {2122      currentHookNameInDev = 'useReducer';2123      updateHookTypesDev();2124      const prevDispatcher = ReactCurrentDispatcher.current;2125      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2126      try {2127        return rerenderReducer(reducer, initialArg, init);2128      } finally {2129        ReactCurrentDispatcher.current = prevDispatcher;2130      }2131    },2132    useRef   (initialValue   )                 {2133      currentHookNameInDev = 'useRef';2134      updateHookTypesDev();2135      return updateRef(initialValue);2136    },2137    useState   (2138      initialState               ,2139    )                                     {2140      currentHookNameInDev = 'useState';2141      updateHookTypesDev();2142      const prevDispatcher = ReactCurrentDispatcher.current;2143      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2144      try {2145        return rerenderState(initialState);2146      } finally {2147        ReactCurrentDispatcher.current = prevDispatcher;2148      }2149    },2150    useDebugValue   (value   , formatterFn                      )       {2151      currentHookNameInDev = 'useDebugValue';2152      updateHookTypesDev();2153      return updateDebugValue(value, formatterFn);2154    },2155    useDeferredValue   (value   )    {2156      currentHookNameInDev = 'useDeferredValue';2157      updateHookTypesDev();2158      return rerenderDeferredValue(value);2159    },2160    useTransition()                                  {2161      currentHookNameInDev = 'useTransition';2162      updateHookTypesDev();2163      return rerenderTransition();2164    },2165    useMutableSource                  (2166      source                       ,2167      getSnapshot                                              ,2168      subscribe                                            ,2169    )           {2170      currentHookNameInDev = 'useMutableSource';2171      updateHookTypesDev();2172      return updateMutableSource(source, getSnapshot, subscribe);2173    },2174    useOpaqueIdentifier()                      {2175      currentHookNameInDev = 'useOpaqueIdentifier';2176      updateHookTypesDev();2177      return rerenderOpaqueIdentifier();2178    },2179    unstable_isNewReconciler: enableNewReconciler,2180  };2181  InvalidNestedHooksDispatcherOnMountInDEV = {2182    readContext   (2183      context                 ,2184      observedBits                         ,2185    )    {2186      warnInvalidContextAccess();2187      return readContext(context, observedBits);2188    },2189    useCallback   (callback   , deps                            )    {2190      currentHookNameInDev = 'useCallback';2191      warnInvalidHookAccess();2192      mountHookTypesDev();2193      return mountCallback(callback, deps);2194    },2195    useContext   (2196      context                 ,2197      observedBits                         ,2198    )    {2199      currentHookNameInDev = 'useContext';2200      warnInvalidHookAccess();2201      mountHookTypesDev();2202      return readContext(context, observedBits);2203    },2204    useEffect(2205      create                           ,2206      deps                            ,2207    )       {2208      currentHookNameInDev = 'useEffect';2209      warnInvalidHookAccess();2210      mountHookTypesDev();2211      return mountEffect(create, deps);2212    },2213    useImperativeHandle   (2214      ref                                                                   ,2215      create         ,2216      deps                            ,2217    )       {2218      currentHookNameInDev = 'useImperativeHandle';2219      warnInvalidHookAccess();2220      mountHookTypesDev();2221      return mountImperativeHandle(ref, create, deps);2222    },2223    useLayoutEffect(2224      create                           ,2225      deps                            ,2226    )       {2227      currentHookNameInDev = 'useLayoutEffect';2228      warnInvalidHookAccess();2229      mountHookTypesDev();2230      return mountLayoutEffect(create, deps);2231    },2232    useMemo   (create         , deps                            )    {2233      currentHookNameInDev = 'useMemo';2234      warnInvalidHookAccess();2235      mountHookTypesDev();2236      const prevDispatcher = ReactCurrentDispatcher.current;2237      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2238      try {2239        return mountMemo(create, deps);2240      } finally {2241        ReactCurrentDispatcher.current = prevDispatcher;2242      }2243    },2244    useReducer         (2245      reducer             ,2246      initialArg   ,2247      init         ,2248    )                   {2249      currentHookNameInDev = 'useReducer';2250      warnInvalidHookAccess();2251      mountHookTypesDev();2252      const prevDispatcher = ReactCurrentDispatcher.current;2253      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2254      try {2255        return mountReducer(reducer, initialArg, init);2256      } finally {2257        ReactCurrentDispatcher.current = prevDispatcher;2258      }2259    },2260    useRef   (initialValue   )                 {2261      currentHookNameInDev = 'useRef';2262      warnInvalidHookAccess();2263      mountHookTypesDev();2264      return mountRef(initialValue);2265    },2266    useState   (2267      initialState               ,2268    )                                     {2269      currentHookNameInDev = 'useState';2270      warnInvalidHookAccess();2271      mountHookTypesDev();2272      const prevDispatcher = ReactCurrentDispatcher.current;2273      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2274      try {2275        return mountState(initialState);2276      } finally {2277        ReactCurrentDispatcher.current = prevDispatcher;2278      }2279    },2280    useDebugValue   (value   , formatterFn                      )       {2281      currentHookNameInDev = 'useDebugValue';2282      warnInvalidHookAccess();2283      mountHookTypesDev();2284      return mountDebugValue(value, formatterFn);2285    },2286    useDeferredValue   (value   )    {2287      currentHookNameInDev = 'useDeferredValue';2288      warnInvalidHookAccess();2289      mountHookTypesDev();2290      return mountDeferredValue(value);2291    },2292    useTransition()                                  {2293      currentHookNameInDev = 'useTransition';2294      warnInvalidHookAccess();2295      mountHookTypesDev();2296      return mountTransition();2297    },2298    useMutableSource                  (2299      source                       ,2300      getSnapshot                                              ,2301      subscribe                                            ,2302    )           {2303      currentHookNameInDev = 'useMutableSource';2304      warnInvalidHookAccess();2305      mountHookTypesDev();2306      return mountMutableSource(source, getSnapshot, subscribe);2307    },2308    useOpaqueIdentifier()                      {2309      currentHookNameInDev = 'useOpaqueIdentifier';2310      warnInvalidHookAccess();2311      mountHookTypesDev();2312      return mountOpaqueIdentifier();2313    },2314    unstable_isNewReconciler: enableNewReconciler,2315  };2316  InvalidNestedHooksDispatcherOnUpdateInDEV = {2317    readContext   (2318      context                 ,2319      observedBits                         ,2320    )    {2321      warnInvalidContextAccess();2322      return readContext(context, observedBits);2323    },2324    useCallback   (callback   , deps                            )    {2325      currentHookNameInDev = 'useCallback';2326      warnInvalidHookAccess();2327      updateHookTypesDev();2328      return updateCallback(callback, deps);2329    },2330    useContext   (2331      context                 ,2332      observedBits                         ,2333    )    {2334      currentHookNameInDev = 'useContext';2335      warnInvalidHookAccess();2336      updateHookTypesDev();2337      return readContext(context, observedBits);2338    },2339    useEffect(2340      create                           ,2341      deps                            ,2342    )       {2343      currentHookNameInDev = 'useEffect';2344      warnInvalidHookAccess();2345      updateHookTypesDev();2346      return updateEffect(create, deps);2347    },2348    useImperativeHandle   (2349      ref                                                                   ,2350      create         ,2351      deps                            ,2352    )       {2353      currentHookNameInDev = 'useImperativeHandle';2354      warnInvalidHookAccess();2355      updateHookTypesDev();2356      return updateImperativeHandle(ref, create, deps);2357    },2358    useLayoutEffect(2359      create                           ,2360      deps                            ,2361    )       {2362      currentHookNameInDev = 'useLayoutEffect';2363      warnInvalidHookAccess();2364      updateHookTypesDev();2365      return updateLayoutEffect(create, deps);2366    },2367    useMemo   (create         , deps                            )    {2368      currentHookNameInDev = 'useMemo';2369      warnInvalidHookAccess();2370      updateHookTypesDev();2371      const prevDispatcher = ReactCurrentDispatcher.current;2372      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2373      try {2374        return updateMemo(create, deps);2375      } finally {2376        ReactCurrentDispatcher.current = prevDispatcher;2377      }2378    },2379    useReducer         (2380      reducer             ,2381      initialArg   ,2382      init         ,2383    )                   {2384      currentHookNameInDev = 'useReducer';2385      warnInvalidHookAccess();2386      updateHookTypesDev();2387      const prevDispatcher = ReactCurrentDispatcher.current;2388      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2389      try {2390        return updateReducer(reducer, initialArg, init);2391      } finally {2392        ReactCurrentDispatcher.current = prevDispatcher;2393      }2394    },2395    useRef   (initialValue   )                 {2396      currentHookNameInDev = 'useRef';2397      warnInvalidHookAccess();2398      updateHookTypesDev();2399      return updateRef(initialValue);2400    },2401    useState   (2402      initialState               ,2403    )                                     {2404      currentHookNameInDev = 'useState';2405      warnInvalidHookAccess();2406      updateHookTypesDev();2407      const prevDispatcher = ReactCurrentDispatcher.current;2408      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2409      try {2410        return updateState(initialState);2411      } finally {2412        ReactCurrentDispatcher.current = prevDispatcher;2413      }2414    },2415    useDebugValue   (value   , formatterFn                      )       {2416      currentHookNameInDev = 'useDebugValue';2417      warnInvalidHookAccess();2418      updateHookTypesDev();2419      return updateDebugValue(value, formatterFn);2420    },2421    useDeferredValue   (value   )    {2422      currentHookNameInDev = 'useDeferredValue';2423      warnInvalidHookAccess();2424      updateHookTypesDev();2425      return updateDeferredValue(value);2426    },2427    useTransition()                                  {2428      currentHookNameInDev = 'useTransition';2429      warnInvalidHookAccess();2430      updateHookTypesDev();2431      return updateTransition();2432    },2433    useMutableSource                  (2434      source                       ,2435      getSnapshot                                              ,2436      subscribe                                            ,2437    )           {2438      currentHookNameInDev = 'useMutableSource';2439      warnInvalidHookAccess();2440      updateHookTypesDev();2441      return updateMutableSource(source, getSnapshot, subscribe);2442    },2443    useOpaqueIdentifier()                      {2444      currentHookNameInDev = 'useOpaqueIdentifier';2445      warnInvalidHookAccess();2446      updateHookTypesDev();2447      return updateOpaqueIdentifier();2448    },2449    unstable_isNewReconciler: enableNewReconciler,2450  };2451  InvalidNestedHooksDispatcherOnRerenderInDEV = {2452    readContext   (2453      context                 ,2454      observedBits                         ,2455    )    {2456      warnInvalidContextAccess();2457      return readContext(context, observedBits);2458    },2459    useCallback   (callback   , deps                            )    {2460      currentHookNameInDev = 'useCallback';2461      warnInvalidHookAccess();2462      updateHookTypesDev();2463      return updateCallback(callback, deps);2464    },2465    useContext   (2466      context                 ,2467      observedBits                         ,2468    )    {2469      currentHookNameInDev = 'useContext';2470      warnInvalidHookAccess();2471      updateHookTypesDev();2472      return readContext(context, observedBits);2473    },2474    useEffect(2475      create                           ,2476      deps                            ,2477    )       {2478      currentHookNameInDev = 'useEffect';2479      warnInvalidHookAccess();2480      updateHookTypesDev();2481      return updateEffect(create, deps);2482    },2483    useImperativeHandle   (2484      ref                                                                   ,2485      create         ,2486      deps                            ,2487    )       {2488      currentHookNameInDev = 'useImperativeHandle';2489      warnInvalidHookAccess();2490      updateHookTypesDev();2491      return updateImperativeHandle(ref, create, deps);2492    },2493    useLayoutEffect(2494      create                           ,2495      deps                            ,2496    )       {2497      currentHookNameInDev = 'useLayoutEffect';2498      warnInvalidHookAccess();2499      updateHookTypesDev();2500      return updateLayoutEffect(create, deps);2501    },2502    useMemo   (create         , deps                            )    {2503      currentHookNameInDev = 'useMemo';2504      warnInvalidHookAccess();2505      updateHookTypesDev();2506      const prevDispatcher = ReactCurrentDispatcher.current;2507      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2508      try {2509        return updateMemo(create, deps);2510      } finally {2511        ReactCurrentDispatcher.current = prevDispatcher;2512      }2513    },2514    useReducer         (...

ReactFiberHooks.old.js

Source:ReactFiberHooks.old.js

...1116  deps                            ,1117)       {1118  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);1119}1120function updateLayoutEffect(1121  create                           ,1122  deps                            ,1123)       {1124  return updateEffectImpl(UpdateEffect, HookLayout, create, deps);1125}1126function imperativeHandleEffect   (1127  create         ,1128  ref                                                                   ,1129) {1130  if (typeof ref === 'function') {1131    const refCallback = ref;1132    const inst = create();1133    refCallback(inst);1134    return () => {1135      refCallback(null);1136    };1137  } else if (ref !== null && ref !== undefined) {1138    const refObject = ref;1139    if (__DEV__) {1140      if (!refObject.hasOwnProperty('current')) {1141        console.error(1142          'Expected useImperativeHandle() first argument to either be a ' +1143            'ref callback or React.createRef() object. Instead received: %s.',1144          'an object with keys {' + Object.keys(refObject).join(', ') + '}',1145        );1146      }1147    }1148    const inst = create();1149    refObject.current = inst;1150    return () => {1151      refObject.current = null;1152    };1153  }1154}1155function mountImperativeHandle   (1156  ref                                                                   ,1157  create         ,1158  deps                            ,1159)       {1160  if (__DEV__) {1161    if (typeof create !== 'function') {1162      console.error(1163        'Expected useImperativeHandle() second argument to be a function ' +1164          'that creates a handle. Instead received: %s.',1165        create !== null ? typeof create : 'null',1166      );1167    }1168  }1169  // TODO: If deps are provided, should we skip comparing the ref itself?1170  const effectDeps =1171    deps !== null && deps !== undefined ? deps.concat([ref]) : null;1172  return mountEffectImpl(1173    UpdateEffect,1174    HookLayout,1175    imperativeHandleEffect.bind(null, create, ref),1176    effectDeps,1177  );1178}1179function updateImperativeHandle   (1180  ref                                                                   ,1181  create         ,1182  deps                            ,1183)       {1184  if (__DEV__) {1185    if (typeof create !== 'function') {1186      console.error(1187        'Expected useImperativeHandle() second argument to be a function ' +1188          'that creates a handle. Instead received: %s.',1189        create !== null ? typeof create : 'null',1190      );1191    }1192  }1193  // TODO: If deps are provided, should we skip comparing the ref itself?1194  const effectDeps =1195    deps !== null && deps !== undefined ? deps.concat([ref]) : null;1196  return updateEffectImpl(1197    UpdateEffect,1198    HookLayout,1199    imperativeHandleEffect.bind(null, create, ref),1200    effectDeps,1201  );1202}1203function mountDebugValue   (value   , formatterFn                      )       {1204  // This hook is normally a no-op.1205  // The react-debug-hooks package injects its own implementation1206  // so that e.g. DevTools can display custom hook values.1207}1208const updateDebugValue = mountDebugValue;1209function mountCallback   (callback   , deps                            )    {1210  const hook = mountWorkInProgressHook();1211  const nextDeps = deps === undefined ? null : deps;1212  hook.memoizedState = [callback, nextDeps];1213  return callback;1214}1215function updateCallback   (callback   , deps                            )    {1216  const hook = updateWorkInProgressHook();1217  const nextDeps = deps === undefined ? null : deps;1218  const prevState = hook.memoizedState;1219  if (prevState !== null) {1220    if (nextDeps !== null) {1221      const prevDeps                      = prevState[1];1222      if (areHookInputsEqual(nextDeps, prevDeps)) {1223        return prevState[0];1224      }1225    }1226  }1227  hook.memoizedState = [callback, nextDeps];1228  return callback;1229}1230function mountMemo   (1231  nextCreate         ,1232  deps                            ,1233)    {1234  const hook = mountWorkInProgressHook();1235  const nextDeps = deps === undefined ? null : deps;1236  const nextValue = nextCreate();1237  hook.memoizedState = [nextValue, nextDeps];1238  return nextValue;1239}1240function updateMemo   (1241  nextCreate         ,1242  deps                            ,1243)    {1244  const hook = updateWorkInProgressHook();1245  const nextDeps = deps === undefined ? null : deps;1246  const prevState = hook.memoizedState;1247  if (prevState !== null) {1248    // Assume these are defined. If they're not, areHookInputsEqual will warn.1249    if (nextDeps !== null) {1250      const prevDeps                      = prevState[1];1251      if (areHookInputsEqual(nextDeps, prevDeps)) {1252        return prevState[0];1253      }1254    }1255  }1256  const nextValue = nextCreate();1257  hook.memoizedState = [nextValue, nextDeps];1258  return nextValue;1259}1260function mountDeferredValue   (value   )    {1261  const [prevValue, setValue] = mountState(value);1262  mountEffect(() => {1263    const prevTransition = ReactCurrentBatchConfig.transition;1264    ReactCurrentBatchConfig.transition = 1;1265    try {1266      setValue(value);1267    } finally {1268      ReactCurrentBatchConfig.transition = prevTransition;1269    }1270  }, [value]);1271  return prevValue;1272}1273function updateDeferredValue   (value   )    {1274  const [prevValue, setValue] = updateState(value);1275  updateEffect(() => {1276    const prevTransition = ReactCurrentBatchConfig.transition;1277    ReactCurrentBatchConfig.transition = 1;1278    try {1279      setValue(value);1280    } finally {1281      ReactCurrentBatchConfig.transition = prevTransition;1282    }1283  }, [value]);1284  return prevValue;1285}1286function rerenderDeferredValue   (value   )    {1287  const [prevValue, setValue] = rerenderState(value);1288  updateEffect(() => {1289    const prevTransition = ReactCurrentBatchConfig.transition;1290    ReactCurrentBatchConfig.transition = 1;1291    try {1292      setValue(value);1293    } finally {1294      ReactCurrentBatchConfig.transition = prevTransition;1295    }1296  }, [value]);1297  return prevValue;1298}1299function startTransition(setPending, callback) {1300  const priorityLevel = getCurrentPriorityLevel();1301  if (decoupleUpdatePriorityFromScheduler) {1302    const previousLanePriority = getCurrentUpdateLanePriority();1303    setCurrentUpdateLanePriority(1304      higherLanePriority(previousLanePriority, InputContinuousLanePriority),1305    );1306    runWithPriority(1307      priorityLevel < UserBlockingPriority1308        ? UserBlockingPriority1309        : priorityLevel,1310      () => {1311        setPending(true);1312      },1313    );1314    // TODO: Can remove this. Was only necessary because we used to give1315    // different behavior to transitions without a config object. Now they are1316    // all treated the same.1317    setCurrentUpdateLanePriority(DefaultLanePriority);1318    runWithPriority(1319      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,1320      () => {1321        const prevTransition = ReactCurrentBatchConfig.transition;1322        ReactCurrentBatchConfig.transition = 1;1323        try {1324          setPending(false);1325          callback();1326        } finally {1327          if (decoupleUpdatePriorityFromScheduler) {1328            setCurrentUpdateLanePriority(previousLanePriority);1329          }1330          ReactCurrentBatchConfig.transition = prevTransition;1331        }1332      },1333    );1334  } else {1335    runWithPriority(1336      priorityLevel < UserBlockingPriority1337        ? UserBlockingPriority1338        : priorityLevel,1339      () => {1340        setPending(true);1341      },1342    );1343    runWithPriority(1344      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,1345      () => {1346        const prevTransition = ReactCurrentBatchConfig.transition;1347        ReactCurrentBatchConfig.transition = 1;1348        try {1349          setPending(false);1350          callback();1351        } finally {1352          ReactCurrentBatchConfig.transition = prevTransition;1353        }1354      },1355    );1356  }1357}1358function mountTransition()                                  {1359  const [isPending, setPending] = mountState(false);1360  // The `start` method can be stored on a ref, since `setPending`1361  // never changes.1362  const start = startTransition.bind(null, setPending);1363  mountRef(start);1364  return [start, isPending];1365}1366function updateTransition()                                  {1367  const [isPending] = updateState(false);1368  const startRef = updateRef();1369  const start                       = (startRef.current     );1370  return [start, isPending];1371}1372function rerenderTransition()                                  {1373  const [isPending] = rerenderState(false);1374  const startRef = updateRef();1375  const start                       = (startRef.current     );1376  return [start, isPending];1377}1378let isUpdatingOpaqueValueInRenderPhase = false;1379export function getIsUpdatingOpaqueValueInRenderPhaseInDEV()                 {1380  if (__DEV__) {1381    return isUpdatingOpaqueValueInRenderPhase;1382  }1383}1384function warnOnOpaqueIdentifierAccessInDEV(fiber) {1385  if (__DEV__) {1386    // TODO: Should warn in effects and callbacks, too1387    const name = getComponentName(fiber.type) || 'Unknown';1388    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {1389      console.error(1390        'The object passed back from useOpaqueIdentifier is meant to be ' +1391          'passed through to attributes only. Do not read the ' +1392          'value directly.',1393      );1394      didWarnAboutUseOpaqueIdentifier[name] = true;1395    }1396  }1397}1398function mountOpaqueIdentifier()                      {1399  const makeId = __DEV__1400    ? makeClientIdInDEV.bind(1401        null,1402        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),1403      )1404    : makeClientId;1405  if (getIsHydrating()) {1406    let didUpgrade = false;1407    const fiber = currentlyRenderingFiber;1408    const readValue = () => {1409      if (!didUpgrade) {1410        // Only upgrade once. This works even inside the render phase because1411        // the update is added to a shared queue, which outlasts the1412        // in-progress render.1413        didUpgrade = true;1414        if (__DEV__) {1415          isUpdatingOpaqueValueInRenderPhase = true;1416          setId(makeId());1417          isUpdatingOpaqueValueInRenderPhase = false;1418          warnOnOpaqueIdentifierAccessInDEV(fiber);1419        } else {1420          setId(makeId());1421        }1422      }1423      invariant(1424        false,1425        'The object passed back from useOpaqueIdentifier is meant to be ' +1426          'passed through to attributes only. Do not read the value directly.',1427      );1428    };1429    const id = makeOpaqueHydratingObject(readValue);1430    const setId = mountState(id)[1];1431    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {1432      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;1433      pushEffect(1434        HookHasEffect | HookPassive,1435        () => {1436          setId(makeId());1437        },1438        undefined,1439        null,1440      );1441    }1442    return id;1443  } else {1444    const id = makeId();1445    mountState(id);1446    return id;1447  }1448}1449function updateOpaqueIdentifier()                      {1450  const id = updateState(undefined)[0];1451  return id;1452}1453function rerenderOpaqueIdentifier()                      {1454  const id = rerenderState(undefined)[0];1455  return id;1456}1457function dispatchAction      (1458  fiber       ,1459  queue                   ,1460  action   ,1461) {1462  if (__DEV__) {1463    if (typeof arguments[3] === 'function') {1464      console.error(1465        "State updates from the useState() and useReducer() Hooks don't support the " +1466          'second callback argument. To execute a side effect after ' +1467          'rendering, declare it in the component body with useEffect().',1468      );1469    }1470  }1471  const eventTime = requestEventTime();1472  const lane = requestUpdateLane(fiber);1473  const update               = {1474    lane,1475    action,1476    eagerReducer: null,1477    eagerState: null,1478    next: (null     ),1479  };1480  // Append the update to the end of the list.1481  const pending = queue.pending;1482  if (pending === null) {1483    // This is the first update. Create a circular list.1484    update.next = update;1485  } else {1486    update.next = pending.next;1487    pending.next = update;1488  }1489  queue.pending = update;1490  const alternate = fiber.alternate;1491  if (1492    fiber === currentlyRenderingFiber ||1493    (alternate !== null && alternate === currentlyRenderingFiber)1494  ) {1495    // This is a render phase update. Stash it in a lazily-created map of1496    // queue -> linked list of updates. After this render pass, we'll restart1497    // and apply the stashed updates on top of the work-in-progress hook.1498    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;1499  } else {1500    if (1501      fiber.lanes === NoLanes &&1502      (alternate === null || alternate.lanes === NoLanes)1503    ) {1504      // The queue is currently empty, which means we can eagerly compute the1505      // next state before entering the render phase. If the new state is the1506      // same as the current state, we may be able to bail out entirely.1507      const lastRenderedReducer = queue.lastRenderedReducer;1508      if (lastRenderedReducer !== null) {1509        let prevDispatcher;1510        if (__DEV__) {1511          prevDispatcher = ReactCurrentDispatcher.current;1512          ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1513        }1514        try {1515          const currentState    = (queue.lastRenderedState     );1516          const eagerState = lastRenderedReducer(currentState, action);1517          // Stash the eagerly computed state, and the reducer used to compute1518          // it, on the update object. If the reducer hasn't changed by the1519          // time we enter the render phase, then the eager state can be used1520          // without calling the reducer again.1521          update.eagerReducer = lastRenderedReducer;1522          update.eagerState = eagerState;1523          if (is(eagerState, currentState)) {1524            // Fast path. We can bail out without scheduling React to re-render.1525            // It's still possible that we'll need to rebase this update later,1526            // if the component re-renders for a different reason and by that1527            // time the reducer has changed.1528            return;1529          }1530        } catch (error) {1531          // Suppress the error. It will throw again in the render phase.1532        } finally {1533          if (__DEV__) {1534            ReactCurrentDispatcher.current = prevDispatcher;1535          }1536        }1537      }1538    }1539    if (__DEV__) {1540      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests1541      if ('undefined' !== typeof jest) {1542        warnIfNotScopedWithMatchingAct(fiber);1543        warnIfNotCurrentlyActingUpdatesInDev(fiber);1544      }1545    }1546    scheduleUpdateOnFiber(fiber, lane, eventTime);1547  }1548  if (__DEV__) {1549    if (enableDebugTracing) {1550      if (fiber.mode & DebugTracingMode) {1551        const name = getComponentName(fiber.type) || 'Unknown';1552        logStateUpdateScheduled(name, lane, action);1553      }1554    }1555  }1556  if (enableSchedulingProfiler) {1557    markStateUpdateScheduled(fiber, lane);1558  }1559}1560export const ContextOnlyDispatcher             = {1561  readContext,1562  useCallback: throwInvalidHookError,1563  useContext: throwInvalidHookError,1564  useEffect: throwInvalidHookError,1565  useImperativeHandle: throwInvalidHookError,1566  useLayoutEffect: throwInvalidHookError,1567  useMemo: throwInvalidHookError,1568  useReducer: throwInvalidHookError,1569  useRef: throwInvalidHookError,1570  useState: throwInvalidHookError,1571  useDebugValue: throwInvalidHookError,1572  useDeferredValue: throwInvalidHookError,1573  useTransition: throwInvalidHookError,1574  useMutableSource: throwInvalidHookError,1575  useOpaqueIdentifier: throwInvalidHookError,1576  unstable_isNewReconciler: enableNewReconciler,1577};1578const HooksDispatcherOnMount             = {1579  readContext,1580  useCallback: mountCallback,1581  useContext: readContext,1582  useEffect: mountEffect,1583  useImperativeHandle: mountImperativeHandle,1584  useLayoutEffect: mountLayoutEffect,1585  useMemo: mountMemo,1586  useReducer: mountReducer,1587  useRef: mountRef,1588  useState: mountState,1589  useDebugValue: mountDebugValue,1590  useDeferredValue: mountDeferredValue,1591  useTransition: mountTransition,1592  useMutableSource: mountMutableSource,1593  useOpaqueIdentifier: mountOpaqueIdentifier,1594  unstable_isNewReconciler: enableNewReconciler,1595};1596const HooksDispatcherOnUpdate             = {1597  readContext,1598  useCallback: updateCallback,1599  useContext: readContext,1600  useEffect: updateEffect,1601  useImperativeHandle: updateImperativeHandle,1602  useLayoutEffect: updateLayoutEffect,1603  useMemo: updateMemo,1604  useReducer: updateReducer,1605  useRef: updateRef,1606  useState: updateState,1607  useDebugValue: updateDebugValue,1608  useDeferredValue: updateDeferredValue,1609  useTransition: updateTransition,1610  useMutableSource: updateMutableSource,1611  useOpaqueIdentifier: updateOpaqueIdentifier,1612  unstable_isNewReconciler: enableNewReconciler,1613};1614const HooksDispatcherOnRerender             = {1615  readContext,1616  useCallback: updateCallback,1617  useContext: readContext,1618  useEffect: updateEffect,1619  useImperativeHandle: updateImperativeHandle,1620  useLayoutEffect: updateLayoutEffect,1621  useMemo: updateMemo,1622  useReducer: rerenderReducer,1623  useRef: updateRef,1624  useState: rerenderState,1625  useDebugValue: updateDebugValue,1626  useDeferredValue: rerenderDeferredValue,1627  useTransition: rerenderTransition,1628  useMutableSource: updateMutableSource,1629  useOpaqueIdentifier: rerenderOpaqueIdentifier,1630  unstable_isNewReconciler: enableNewReconciler,1631};1632let HooksDispatcherOnMountInDEV                    = null;1633let HooksDispatcherOnMountWithHookTypesInDEV                    = null;1634let HooksDispatcherOnUpdateInDEV                    = null;1635let HooksDispatcherOnRerenderInDEV                    = null;1636let InvalidNestedHooksDispatcherOnMountInDEV                    = null;1637let InvalidNestedHooksDispatcherOnUpdateInDEV                    = null;1638let InvalidNestedHooksDispatcherOnRerenderInDEV                    = null;1639if (__DEV__) {1640  const warnInvalidContextAccess = () => {1641    console.error(1642      'Context can only be read while React is rendering. ' +1643        'In classes, you can read it in the render method or getDerivedStateFromProps. ' +1644        'In function components, you can read it directly in the function body, but not ' +1645        'inside Hooks like useReducer() or useMemo().',1646    );1647  };1648  const warnInvalidHookAccess = () => {1649    console.error(1650      'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +1651        'You can only call Hooks at the top level of your React function. ' +1652        'For more information, see ' +1653        'https://reactjs.org/link/rules-of-hooks',1654    );1655  };1656  HooksDispatcherOnMountInDEV = {1657    readContext   (1658      context                 ,1659      observedBits                         ,1660    )    {1661      return readContext(context, observedBits);1662    },1663    useCallback   (callback   , deps                            )    {1664      currentHookNameInDev = 'useCallback';1665      mountHookTypesDev();1666      checkDepsAreArrayDev(deps);1667      return mountCallback(callback, deps);1668    },1669    useContext   (1670      context                 ,1671      observedBits                         ,1672    )    {1673      currentHookNameInDev = 'useContext';1674      mountHookTypesDev();1675      return readContext(context, observedBits);1676    },1677    useEffect(1678      create                           ,1679      deps                            ,1680    )       {1681      currentHookNameInDev = 'useEffect';1682      mountHookTypesDev();1683      checkDepsAreArrayDev(deps);1684      return mountEffect(create, deps);1685    },1686    useImperativeHandle   (1687      ref                                                                   ,1688      create         ,1689      deps                            ,1690    )       {1691      currentHookNameInDev = 'useImperativeHandle';1692      mountHookTypesDev();1693      checkDepsAreArrayDev(deps);1694      return mountImperativeHandle(ref, create, deps);1695    },1696    useLayoutEffect(1697      create                           ,1698      deps                            ,1699    )       {1700      currentHookNameInDev = 'useLayoutEffect';1701      mountHookTypesDev();1702      checkDepsAreArrayDev(deps);1703      return mountLayoutEffect(create, deps);1704    },1705    useMemo   (create         , deps                            )    {1706      currentHookNameInDev = 'useMemo';1707      mountHookTypesDev();1708      checkDepsAreArrayDev(deps);1709      const prevDispatcher = ReactCurrentDispatcher.current;1710      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1711      try {1712        return mountMemo(create, deps);1713      } finally {1714        ReactCurrentDispatcher.current = prevDispatcher;1715      }1716    },1717    useReducer         (1718      reducer             ,1719      initialArg   ,1720      init         ,1721    )                   {1722      currentHookNameInDev = 'useReducer';1723      mountHookTypesDev();1724      const prevDispatcher = ReactCurrentDispatcher.current;1725      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1726      try {1727        return mountReducer(reducer, initialArg, init);1728      } finally {1729        ReactCurrentDispatcher.current = prevDispatcher;1730      }1731    },1732    useRef   (initialValue   )                 {1733      currentHookNameInDev = 'useRef';1734      mountHookTypesDev();1735      return mountRef(initialValue);1736    },1737    useState   (1738      initialState               ,1739    )                                     {1740      currentHookNameInDev = 'useState';1741      mountHookTypesDev();1742      const prevDispatcher = ReactCurrentDispatcher.current;1743      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1744      try {1745        return mountState(initialState);1746      } finally {1747        ReactCurrentDispatcher.current = prevDispatcher;1748      }1749    },1750    useDebugValue   (value   , formatterFn                      )       {1751      currentHookNameInDev = 'useDebugValue';1752      mountHookTypesDev();1753      return mountDebugValue(value, formatterFn);1754    },1755    useDeferredValue   (value   )    {1756      currentHookNameInDev = 'useDeferredValue';1757      mountHookTypesDev();1758      return mountDeferredValue(value);1759    },1760    useTransition()                                  {1761      currentHookNameInDev = 'useTransition';1762      mountHookTypesDev();1763      return mountTransition();1764    },1765    useMutableSource                  (1766      source                       ,1767      getSnapshot                                              ,1768      subscribe                                            ,1769    )           {1770      currentHookNameInDev = 'useMutableSource';1771      mountHookTypesDev();1772      return mountMutableSource(source, getSnapshot, subscribe);1773    },1774    useOpaqueIdentifier()                      {1775      currentHookNameInDev = 'useOpaqueIdentifier';1776      mountHookTypesDev();1777      return mountOpaqueIdentifier();1778    },1779    unstable_isNewReconciler: enableNewReconciler,1780  };1781  HooksDispatcherOnMountWithHookTypesInDEV = {1782    readContext   (1783      context                 ,1784      observedBits                         ,1785    )    {1786      return readContext(context, observedBits);1787    },1788    useCallback   (callback   , deps                            )    {1789      currentHookNameInDev = 'useCallback';1790      updateHookTypesDev();1791      return mountCallback(callback, deps);1792    },1793    useContext   (1794      context                 ,1795      observedBits                         ,1796    )    {1797      currentHookNameInDev = 'useContext';1798      updateHookTypesDev();1799      return readContext(context, observedBits);1800    },1801    useEffect(1802      create                           ,1803      deps                            ,1804    )       {1805      currentHookNameInDev = 'useEffect';1806      updateHookTypesDev();1807      return mountEffect(create, deps);1808    },1809    useImperativeHandle   (1810      ref                                                                   ,1811      create         ,1812      deps                            ,1813    )       {1814      currentHookNameInDev = 'useImperativeHandle';1815      updateHookTypesDev();1816      return mountImperativeHandle(ref, create, deps);1817    },1818    useLayoutEffect(1819      create                           ,1820      deps                            ,1821    )       {1822      currentHookNameInDev = 'useLayoutEffect';1823      updateHookTypesDev();1824      return mountLayoutEffect(create, deps);1825    },1826    useMemo   (create         , deps                            )    {1827      currentHookNameInDev = 'useMemo';1828      updateHookTypesDev();1829      const prevDispatcher = ReactCurrentDispatcher.current;1830      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1831      try {1832        return mountMemo(create, deps);1833      } finally {1834        ReactCurrentDispatcher.current = prevDispatcher;1835      }1836    },1837    useReducer         (1838      reducer             ,1839      initialArg   ,1840      init         ,1841    )                   {1842      currentHookNameInDev = 'useReducer';1843      updateHookTypesDev();1844      const prevDispatcher = ReactCurrentDispatcher.current;1845      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1846      try {1847        return mountReducer(reducer, initialArg, init);1848      } finally {1849        ReactCurrentDispatcher.current = prevDispatcher;1850      }1851    },1852    useRef   (initialValue   )                 {1853      currentHookNameInDev = 'useRef';1854      updateHookTypesDev();1855      return mountRef(initialValue);1856    },1857    useState   (1858      initialState               ,1859    )                                     {1860      currentHookNameInDev = 'useState';1861      updateHookTypesDev();1862      const prevDispatcher = ReactCurrentDispatcher.current;1863      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;1864      try {1865        return mountState(initialState);1866      } finally {1867        ReactCurrentDispatcher.current = prevDispatcher;1868      }1869    },1870    useDebugValue   (value   , formatterFn                      )       {1871      currentHookNameInDev = 'useDebugValue';1872      updateHookTypesDev();1873      return mountDebugValue(value, formatterFn);1874    },1875    useDeferredValue   (value   )    {1876      currentHookNameInDev = 'useDeferredValue';1877      updateHookTypesDev();1878      return mountDeferredValue(value);1879    },1880    useTransition()                                  {1881      currentHookNameInDev = 'useTransition';1882      updateHookTypesDev();1883      return mountTransition();1884    },1885    useMutableSource                  (1886      source                       ,1887      getSnapshot                                              ,1888      subscribe                                            ,1889    )           {1890      currentHookNameInDev = 'useMutableSource';1891      updateHookTypesDev();1892      return mountMutableSource(source, getSnapshot, subscribe);1893    },1894    useOpaqueIdentifier()                      {1895      currentHookNameInDev = 'useOpaqueIdentifier';1896      updateHookTypesDev();1897      return mountOpaqueIdentifier();1898    },1899    unstable_isNewReconciler: enableNewReconciler,1900  };1901  HooksDispatcherOnUpdateInDEV = {1902    readContext   (1903      context                 ,1904      observedBits                         ,1905    )    {1906      return readContext(context, observedBits);1907    },1908    useCallback   (callback   , deps                            )    {1909      currentHookNameInDev = 'useCallback';1910      updateHookTypesDev();1911      return updateCallback(callback, deps);1912    },1913    useContext   (1914      context                 ,1915      observedBits                         ,1916    )    {1917      currentHookNameInDev = 'useContext';1918      updateHookTypesDev();1919      return readContext(context, observedBits);1920    },1921    useEffect(1922      create                           ,1923      deps                            ,1924    )       {1925      currentHookNameInDev = 'useEffect';1926      updateHookTypesDev();1927      return updateEffect(create, deps);1928    },1929    useImperativeHandle   (1930      ref                                                                   ,1931      create         ,1932      deps                            ,1933    )       {1934      currentHookNameInDev = 'useImperativeHandle';1935      updateHookTypesDev();1936      return updateImperativeHandle(ref, create, deps);1937    },1938    useLayoutEffect(1939      create                           ,1940      deps                            ,1941    )       {1942      currentHookNameInDev = 'useLayoutEffect';1943      updateHookTypesDev();1944      return updateLayoutEffect(create, deps);1945    },1946    useMemo   (create         , deps                            )    {1947      currentHookNameInDev = 'useMemo';1948      updateHookTypesDev();1949      const prevDispatcher = ReactCurrentDispatcher.current;1950      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1951      try {1952        return updateMemo(create, deps);1953      } finally {1954        ReactCurrentDispatcher.current = prevDispatcher;1955      }1956    },1957    useReducer         (1958      reducer             ,1959      initialArg   ,1960      init         ,1961    )                   {1962      currentHookNameInDev = 'useReducer';1963      updateHookTypesDev();1964      const prevDispatcher = ReactCurrentDispatcher.current;1965      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1966      try {1967        return updateReducer(reducer, initialArg, init);1968      } finally {1969        ReactCurrentDispatcher.current = prevDispatcher;1970      }1971    },1972    useRef   (initialValue   )                 {1973      currentHookNameInDev = 'useRef';1974      updateHookTypesDev();1975      return updateRef(initialValue);1976    },1977    useState   (1978      initialState               ,1979    )                                     {1980      currentHookNameInDev = 'useState';1981      updateHookTypesDev();1982      const prevDispatcher = ReactCurrentDispatcher.current;1983      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;1984      try {1985        return updateState(initialState);1986      } finally {1987        ReactCurrentDispatcher.current = prevDispatcher;1988      }1989    },1990    useDebugValue   (value   , formatterFn                      )       {1991      currentHookNameInDev = 'useDebugValue';1992      updateHookTypesDev();1993      return updateDebugValue(value, formatterFn);1994    },1995    useDeferredValue   (value   )    {1996      currentHookNameInDev = 'useDeferredValue';1997      updateHookTypesDev();1998      return updateDeferredValue(value);1999    },2000    useTransition()                                  {2001      currentHookNameInDev = 'useTransition';2002      updateHookTypesDev();2003      return updateTransition();2004    },2005    useMutableSource                  (2006      source                       ,2007      getSnapshot                                              ,2008      subscribe                                            ,2009    )           {2010      currentHookNameInDev = 'useMutableSource';2011      updateHookTypesDev();2012      return updateMutableSource(source, getSnapshot, subscribe);2013    },2014    useOpaqueIdentifier()                      {2015      currentHookNameInDev = 'useOpaqueIdentifier';2016      updateHookTypesDev();2017      return updateOpaqueIdentifier();2018    },2019    unstable_isNewReconciler: enableNewReconciler,2020  };2021  HooksDispatcherOnRerenderInDEV = {2022    readContext   (2023      context                 ,2024      observedBits                         ,2025    )    {2026      return readContext(context, observedBits);2027    },2028    useCallback   (callback   , deps                            )    {2029      currentHookNameInDev = 'useCallback';2030      updateHookTypesDev();2031      return updateCallback(callback, deps);2032    },2033    useContext   (2034      context                 ,2035      observedBits                         ,2036    )    {2037      currentHookNameInDev = 'useContext';2038      updateHookTypesDev();2039      return readContext(context, observedBits);2040    },2041    useEffect(2042      create                           ,2043      deps                            ,2044    )       {2045      currentHookNameInDev = 'useEffect';2046      updateHookTypesDev();2047      return updateEffect(create, deps);2048    },2049    useImperativeHandle   (2050      ref                                                                   ,2051      create         ,2052      deps                            ,2053    )       {2054      currentHookNameInDev = 'useImperativeHandle';2055      updateHookTypesDev();2056      return updateImperativeHandle(ref, create, deps);2057    },2058    useLayoutEffect(2059      create                           ,2060      deps                            ,2061    )       {2062      currentHookNameInDev = 'useLayoutEffect';2063      updateHookTypesDev();2064      return updateLayoutEffect(create, deps);2065    },2066    useMemo   (create         , deps                            )    {2067      currentHookNameInDev = 'useMemo';2068      updateHookTypesDev();2069      const prevDispatcher = ReactCurrentDispatcher.current;2070      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2071      try {2072        return updateMemo(create, deps);2073      } finally {2074        ReactCurrentDispatcher.current = prevDispatcher;2075      }2076    },2077    useReducer         (2078      reducer             ,2079      initialArg   ,2080      init         ,2081    )                   {2082      currentHookNameInDev = 'useReducer';2083      updateHookTypesDev();2084      const prevDispatcher = ReactCurrentDispatcher.current;2085      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2086      try {2087        return rerenderReducer(reducer, initialArg, init);2088      } finally {2089        ReactCurrentDispatcher.current = prevDispatcher;2090      }2091    },2092    useRef   (initialValue   )                 {2093      currentHookNameInDev = 'useRef';2094      updateHookTypesDev();2095      return updateRef(initialValue);2096    },2097    useState   (2098      initialState               ,2099    )                                     {2100      currentHookNameInDev = 'useState';2101      updateHookTypesDev();2102      const prevDispatcher = ReactCurrentDispatcher.current;2103      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;2104      try {2105        return rerenderState(initialState);2106      } finally {2107        ReactCurrentDispatcher.current = prevDispatcher;2108      }2109    },2110    useDebugValue   (value   , formatterFn                      )       {2111      currentHookNameInDev = 'useDebugValue';2112      updateHookTypesDev();2113      return updateDebugValue(value, formatterFn);2114    },2115    useDeferredValue   (value   )    {2116      currentHookNameInDev = 'useDeferredValue';2117      updateHookTypesDev();2118      return rerenderDeferredValue(value);2119    },2120    useTransition()                                  {2121      currentHookNameInDev = 'useTransition';2122      updateHookTypesDev();2123      return rerenderTransition();2124    },2125    useMutableSource                  (2126      source                       ,2127      getSnapshot                                              ,2128      subscribe                                            ,2129    )           {2130      currentHookNameInDev = 'useMutableSource';2131      updateHookTypesDev();2132      return updateMutableSource(source, getSnapshot, subscribe);2133    },2134    useOpaqueIdentifier()                      {2135      currentHookNameInDev = 'useOpaqueIdentifier';2136      updateHookTypesDev();2137      return rerenderOpaqueIdentifier();2138    },2139    unstable_isNewReconciler: enableNewReconciler,2140  };2141  InvalidNestedHooksDispatcherOnMountInDEV = {2142    readContext   (2143      context                 ,2144      observedBits                         ,2145    )    {2146      warnInvalidContextAccess();2147      return readContext(context, observedBits);2148    },2149    useCallback   (callback   , deps                            )    {2150      currentHookNameInDev = 'useCallback';2151      warnInvalidHookAccess();2152      mountHookTypesDev();2153      return mountCallback(callback, deps);2154    },2155    useContext   (2156      context                 ,2157      observedBits                         ,2158    )    {2159      currentHookNameInDev = 'useContext';2160      warnInvalidHookAccess();2161      mountHookTypesDev();2162      return readContext(context, observedBits);2163    },2164    useEffect(2165      create                           ,2166      deps                            ,2167    )       {2168      currentHookNameInDev = 'useEffect';2169      warnInvalidHookAccess();2170      mountHookTypesDev();2171      return mountEffect(create, deps);2172    },2173    useImperativeHandle   (2174      ref                                                                   ,2175      create         ,2176      deps                            ,2177    )       {2178      currentHookNameInDev = 'useImperativeHandle';2179      warnInvalidHookAccess();2180      mountHookTypesDev();2181      return mountImperativeHandle(ref, create, deps);2182    },2183    useLayoutEffect(2184      create                           ,2185      deps                            ,2186    )       {2187      currentHookNameInDev = 'useLayoutEffect';2188      warnInvalidHookAccess();2189      mountHookTypesDev();2190      return mountLayoutEffect(create, deps);2191    },2192    useMemo   (create         , deps                            )    {2193      currentHookNameInDev = 'useMemo';2194      warnInvalidHookAccess();2195      mountHookTypesDev();2196      const prevDispatcher = ReactCurrentDispatcher.current;2197      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2198      try {2199        return mountMemo(create, deps);2200      } finally {2201        ReactCurrentDispatcher.current = prevDispatcher;2202      }2203    },2204    useReducer         (2205      reducer             ,2206      initialArg   ,2207      init         ,2208    )                   {2209      currentHookNameInDev = 'useReducer';2210      warnInvalidHookAccess();2211      mountHookTypesDev();2212      const prevDispatcher = ReactCurrentDispatcher.current;2213      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2214      try {2215        return mountReducer(reducer, initialArg, init);2216      } finally {2217        ReactCurrentDispatcher.current = prevDispatcher;2218      }2219    },2220    useRef   (initialValue   )                 {2221      currentHookNameInDev = 'useRef';2222      warnInvalidHookAccess();2223      mountHookTypesDev();2224      return mountRef(initialValue);2225    },2226    useState   (2227      initialState               ,2228    )                                     {2229      currentHookNameInDev = 'useState';2230      warnInvalidHookAccess();2231      mountHookTypesDev();2232      const prevDispatcher = ReactCurrentDispatcher.current;2233      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;2234      try {2235        return mountState(initialState);2236      } finally {2237        ReactCurrentDispatcher.current = prevDispatcher;2238      }2239    },2240    useDebugValue   (value   , formatterFn                      )       {2241      currentHookNameInDev = 'useDebugValue';2242      warnInvalidHookAccess();2243      mountHookTypesDev();2244      return mountDebugValue(value, formatterFn);2245    },2246    useDeferredValue   (value   )    {2247      currentHookNameInDev = 'useDeferredValue';2248      warnInvalidHookAccess();2249      mountHookTypesDev();2250      return mountDeferredValue(value);2251    },2252    useTransition()                                  {2253      currentHookNameInDev = 'useTransition';2254      warnInvalidHookAccess();2255      mountHookTypesDev();2256      return mountTransition();2257    },2258    useMutableSource                  (2259      source                       ,2260      getSnapshot                                              ,2261      subscribe                                            ,2262    )           {2263      currentHookNameInDev = 'useMutableSource';2264      warnInvalidHookAccess();2265      mountHookTypesDev();2266      return mountMutableSource(source, getSnapshot, subscribe);2267    },2268    useOpaqueIdentifier()                      {2269      currentHookNameInDev = 'useOpaqueIdentifier';2270      warnInvalidHookAccess();2271      mountHookTypesDev();2272      return mountOpaqueIdentifier();2273    },2274    unstable_isNewReconciler: enableNewReconciler,2275  };2276  InvalidNestedHooksDispatcherOnUpdateInDEV = {2277    readContext   (2278      context                 ,2279      observedBits                         ,2280    )    {2281      warnInvalidContextAccess();2282      return readContext(context, observedBits);2283    },2284    useCallback   (callback   , deps                            )    {2285      currentHookNameInDev = 'useCallback';2286      warnInvalidHookAccess();2287      updateHookTypesDev();2288      return updateCallback(callback, deps);2289    },2290    useContext   (2291      context                 ,2292      observedBits                         ,2293    )    {2294      currentHookNameInDev = 'useContext';2295      warnInvalidHookAccess();2296      updateHookTypesDev();2297      return readContext(context, observedBits);2298    },2299    useEffect(2300      create                           ,2301      deps                            ,2302    )       {2303      currentHookNameInDev = 'useEffect';2304      warnInvalidHookAccess();2305      updateHookTypesDev();2306      return updateEffect(create, deps);2307    },2308    useImperativeHandle   (2309      ref                                                                   ,2310      create         ,2311      deps                            ,2312    )       {2313      currentHookNameInDev = 'useImperativeHandle';2314      warnInvalidHookAccess();2315      updateHookTypesDev();2316      return updateImperativeHandle(ref, create, deps);2317    },2318    useLayoutEffect(2319      create                           ,2320      deps                            ,2321    )       {2322      currentHookNameInDev = 'useLayoutEffect';2323      warnInvalidHookAccess();2324      updateHookTypesDev();2325      return updateLayoutEffect(create, deps);2326    },2327    useMemo   (create         , deps                            )    {2328      currentHookNameInDev = 'useMemo';2329      warnInvalidHookAccess();2330      updateHookTypesDev();2331      const prevDispatcher = ReactCurrentDispatcher.current;2332      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2333      try {2334        return updateMemo(create, deps);2335      } finally {2336        ReactCurrentDispatcher.current = prevDispatcher;2337      }2338    },2339    useReducer         (2340      reducer             ,2341      initialArg   ,2342      init         ,2343    )                   {2344      currentHookNameInDev = 'useReducer';2345      warnInvalidHookAccess();2346      updateHookTypesDev();2347      const prevDispatcher = ReactCurrentDispatcher.current;2348      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2349      try {2350        return updateReducer(reducer, initialArg, init);2351      } finally {2352        ReactCurrentDispatcher.current = prevDispatcher;2353      }2354    },2355    useRef   (initialValue   )                 {2356      currentHookNameInDev = 'useRef';2357      warnInvalidHookAccess();2358      updateHookTypesDev();2359      return updateRef(initialValue);2360    },2361    useState   (2362      initialState               ,2363    )                                     {2364      currentHookNameInDev = 'useState';2365      warnInvalidHookAccess();2366      updateHookTypesDev();2367      const prevDispatcher = ReactCurrentDispatcher.current;2368      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2369      try {2370        return updateState(initialState);2371      } finally {2372        ReactCurrentDispatcher.current = prevDispatcher;2373      }2374    },2375    useDebugValue   (value   , formatterFn                      )       {2376      currentHookNameInDev = 'useDebugValue';2377      warnInvalidHookAccess();2378      updateHookTypesDev();2379      return updateDebugValue(value, formatterFn);2380    },2381    useDeferredValue   (value   )    {2382      currentHookNameInDev = 'useDeferredValue';2383      warnInvalidHookAccess();2384      updateHookTypesDev();2385      return updateDeferredValue(value);2386    },2387    useTransition()                                  {2388      currentHookNameInDev = 'useTransition';2389      warnInvalidHookAccess();2390      updateHookTypesDev();2391      return updateTransition();2392    },2393    useMutableSource                  (2394      source                       ,2395      getSnapshot                                              ,2396      subscribe                                            ,2397    )           {2398      currentHookNameInDev = 'useMutableSource';2399      warnInvalidHookAccess();2400      updateHookTypesDev();2401      return updateMutableSource(source, getSnapshot, subscribe);2402    },2403    useOpaqueIdentifier()                      {2404      currentHookNameInDev = 'useOpaqueIdentifier';2405      warnInvalidHookAccess();2406      updateHookTypesDev();2407      return updateOpaqueIdentifier();2408    },2409    unstable_isNewReconciler: enableNewReconciler,2410  };2411  InvalidNestedHooksDispatcherOnRerenderInDEV = {2412    readContext   (2413      context                 ,2414      observedBits                         ,2415    )    {2416      warnInvalidContextAccess();2417      return readContext(context, observedBits);2418    },2419    useCallback   (callback   , deps                            )    {2420      currentHookNameInDev = 'useCallback';2421      warnInvalidHookAccess();2422      updateHookTypesDev();2423      return updateCallback(callback, deps);2424    },2425    useContext   (2426      context                 ,2427      observedBits                         ,2428    )    {2429      currentHookNameInDev = 'useContext';2430      warnInvalidHookAccess();2431      updateHookTypesDev();2432      return readContext(context, observedBits);2433    },2434    useEffect(2435      create                           ,2436      deps                            ,2437    )       {2438      currentHookNameInDev = 'useEffect';2439      warnInvalidHookAccess();2440      updateHookTypesDev();2441      return updateEffect(create, deps);2442    },2443    useImperativeHandle   (2444      ref                                                                   ,2445      create         ,2446      deps                            ,2447    )       {2448      currentHookNameInDev = 'useImperativeHandle';2449      warnInvalidHookAccess();2450      updateHookTypesDev();2451      return updateImperativeHandle(ref, create, deps);2452    },2453    useLayoutEffect(2454      create                           ,2455      deps                            ,2456    )       {2457      currentHookNameInDev = 'useLayoutEffect';2458      warnInvalidHookAccess();2459      updateHookTypesDev();2460      return updateLayoutEffect(create, deps);2461    },2462    useMemo   (create         , deps                            )    {2463      currentHookNameInDev = 'useMemo';2464      warnInvalidHookAccess();2465      updateHookTypesDev();2466      const prevDispatcher = ReactCurrentDispatcher.current;2467      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;2468      try {2469        return updateMemo(create, deps);2470      } finally {2471        ReactCurrentDispatcher.current = prevDispatcher;2472      }2473    },2474    useReducer         (...

ReactFiberHooks.js

Source:ReactFiberHooks.js

1import ReactCurrentDispatcher from "../react/ReactCurrentDispatcher";2import { requestEventTime, requestUpdateLane } from "./ReactFiberWorkLoop";3import {4  Update as UpdateEffect,5  Passive as PassiveEffect,6} from "./ReactFiberFlags";7import {8  HasEffect as HookHasEffect,9  Layout as HookLayout,10  Passive as HookPassive,11} from "./ReactHookEffectTags";12// The work-in-progress fiber. I've named it differently to distinguish it from13// the work-in-progress hook.14let currentlyRenderingFiber = null;15// Hooks are stored as a linked list on the fiber's memoizedState field. The16// current hook list is the list that belongs to the current fiber. The17// work-in-progress hook list is a new list that will be added to the18// work-in-progress fiber.19// Hooks ç¨é¾è¡¨ç»æï¼ åè´®å¨fiber's memoizedStateåæ®µ20// Hook | null21let currentHook = null;22// Hook | null23let workInProgressHook = null;24// Whether an update was scheduled at any point during the render phase. This25// does not get reset if we do another render pass; only when we're completely26// finished evaluating this component. This is an optimization so we know27// whether we need to clear render phase updates after a throw.28let didScheduleRenderPhaseUpdate = false;29// Where an update was scheduled only during the current render pass. This30// gets reset after each attempt.31// TODO: Maybe there's some way to consolidate this with32// `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.33let didScheduleRenderPhaseUpdateDuringThisPass = false;34export function renderWithHooks(35  // null36  current,37  workInProgress,38  // è¿éæ¯å½æ°ç»ä»¶ï¼ å¶å®å°±æ¯wip.type39  Component,40  // wip.props41  props,42  // context43  secondArg,44  nextRenderLanes45) {46  renderLanes = nextRenderLanes;47  currentlyRenderingFiber = workInProgress;48  // ä¸ºä½è¿è¾¹å°±å·²ç»æ¸ç©º memoizedState å updateQueue äº?49  workInProgress.memoizedState = null;50  workInProgress.updateQueue = null;51  workInProgress.lanes = NoLanes;52  // The following should have already been reset53  // currentHook = null;54  // workInProgressHook = null;55  // didScheduleRenderPhaseUpdate = false;56  // TODO Warn if no hooks are used at all during mount, then some are used during update.57  // Currently we will identify the update render as a mount because memoizedState === null.58  // This is tricky because it's valid for certain types of components (e.g. React.lazy)59  // Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.60  // Non-stateful hooks (e.g. context) don't get added to memoizedState,61  // so memoizedState would be null during updates and mounts.62  // Dispatcher è·useStateæå³63  ReactCurrentDispatcher.current =64    current === null || current.memoizedState === null65      ? HooksDispatcherOnMount66      : HooksDispatcherOnUpdate;67  // ç´æ¥æ§è¡ç»ä»¶å½æ°, å¾å°ä¸ä¸ª jsx object68  let children = Component(props, secondArg);69  // Check if there was a render phase update70  if (didScheduleRenderPhaseUpdateDuringThisPass) {71    // Keep rendering in a loop for as long as render phase updates continue to72    // be scheduled. Use a counter to prevent infinite loops.73    let numberOfReRenders = 0;74    do {75      didScheduleRenderPhaseUpdateDuringThisPass = false;76      invariant(77        numberOfReRenders < RE_RENDER_LIMIT,78        "Too many re-renders. React limits the number of renders to prevent " +79          "an infinite loop."80      );81      numberOfReRenders += 1;82      // Start over from the beginning of the list83      currentHook = null;84      workInProgressHook = null;85      workInProgress.updateQueue = null;86      ReactCurrentDispatcher.current = HooksDispatcherOnRerender;87      children = Component(props, secondArg);88    } while (didScheduleRenderPhaseUpdateDuringThisPass);89  }90  // We can assume the previous dispatcher is always this one, since we set it91  // at the beginning of the render phase and there's no re-entrancy.92  ReactCurrentDispatcher.current = ContextOnlyDispatcher;93  // This check uses currentHook so that it works the same in DEV and prod bundles.94  // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.95  const didRenderTooFewHooks =96    currentHook !== null && currentHook.next !== null;97  renderLanes = NoLanes;98  currentlyRenderingFiber = null;99  currentHook = null;100  workInProgressHook = null;101  didScheduleRenderPhaseUpdate = false;102  invariant(103    !didRenderTooFewHooks,104    "Rendered fewer hooks than expected. This may be caused by an accidental " +105      "early return statement."106  );107  return children;108}109function mountWorkInProgressHook() {110  const hook = {111    memoizedState: null,112    baseState: null,113    baseQueue: null,114    queue: null,115    next: null,116  };117  if (workInProgressHook === null) {118    // This is the first hook in the list119    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;120  } else {121    // ä¸ä¸ªå½æ°ç»ä»¶éé¢ï¼ ä¸¤ä¸ªä»¥ä¸çhookå°±èµ°è¿éï¼ é¾èµ·æ¥äº~122    // Append to the end of the list123    workInProgressHook = workInProgressHook.next = hook;124  }125  return workInProgressHook;126}127function createFunctionComponentUpdateQueue() {128  return {129    lastEffect: null,130  };131}132/**133 * ætagä¸º HookHasEffect|HookPassiveçeffectåå¥fiber.updateQueue134 */135function pushEffect(tag, create, destroy, deps) {136  const effect = {137    tag,138    create,139    destroy,140    deps,141    // Circular142    next: null,143  };144  // å¨æå¦ä¹ çä¾åé, è¿ä¸ªfiberæ¯Appå½æ°ç»ä»¶, å¯¹åºçfiberèç¹æ¯æ²¡æupdateQueueç(åå»ºçæ¶åå°±æ²¡æåå§å)145  let componentUpdateQueue = currentlyRenderingFiber.updateQueue;146  if (componentUpdateQueue === null) {147    componentUpdateQueue = createFunctionComponentUpdateQueue();148    currentlyRenderingFiber.updateQueue = componentUpdateQueue;149    componentUpdateQueue.lastEffect = effect.next = effect;150  } else {151    // è¿éè·updateQueue.shared.pendingé£ä¸ªåå¾ªç¯æäºä¸ä¸æ ·,152    const lastEffect = componentUpdateQueue.lastEffect;153    if (lastEffect === null) {154      componentUpdateQueue.lastEffect = effect.next = effect;155    } else {156      const firstEffect = lastEffect.next;157      lastEffect.next = effect;158      effect.next = firstEffect;159      componentUpdateQueue.lastEffect = effect;160    }161  }162  return effect;163}164function mountEffectImpl(fiberFlags, hookFlags, create, deps) {165  const hook = mountWorkInProgressHook();166  const nextDeps = deps === undefined ? null : deps;167  // å¦å¼ï¼ å°±å¨è¿ï¼ è¿ä¸ªfiberä¸æäº PassiveEffect168  // å¨æå¦çä¾åéï¼ å¯¹äºcomponent App, å¶flagså¨åå»ºçæ¶å169  // ç± placeSingleChild å½æ°æä¸ Placement = 2170  // è¿éåè· UpdateEffect | PassiveEffect ååå¹¶171  currentlyRenderingFiber.flags |= fiberFlags;172  // åªæ¯åå¥updateQueue, **å¹¶ä¸æ§è¡**173  // æ³¨æ, è¿édestroyææ¶ä¸ºundefined, å ä¸ºdestroyå½æ°æ¯createå½æ°çè¿åå¼174  hook.memoizedState = pushEffect(175    HookHasEffect | hookFlags,176    create,177    undefined,178    nextDeps179  );180}181function mountEffect(create, deps) {182  return mountEffectImpl(183    UpdateEffect | PassiveEffect,184    HookPassive,185    create,186    deps187  );188}189function mountState(initialState) {190  // wip.memoizedState å¡ä¸ä¸ªç©ºçhookå¯¹è±¡ï¼ä½ä¸ºhookåé¾è¡¨çèµ·ç¹(?)191  const hook = mountWorkInProgressHook();192  if (typeof initialState === "function") {193    // useStateçåå§ç¶ææ¯å½æ°ï¼ è¿éæ§è¡å½æ°ï¼ è¿åå¼èµå¼ç»initialState194    initialState = initialState();195  }196  hook.memoizedState = hook.baseState = initialState;197  const queue = (hook.queue = {198    pending: null,199    dispatch: null,200    lastRenderedReducer: basicStateReducer,201    lastRenderedState: initialState,202  });203  // const [a, setA] = useState('a')204  // setA å°±æ¯è¿éç dispatchAction205  const dispatch = (queue.dispatch = dispatchAction.bind(206    null,207    currentlyRenderingFiber,208    queue209  ));210  return [hook.memoizedState, dispatch];211}212// è¿å½æ°åå¤´åç213function dispatchAction(fiber, queue, action) {214  const eventTime = requestEventTime();215  const lane = requestUpdateLane(fiber);216  const update = {217    lane,218    action,219    eagerReducer: null,220    eagerState: null,221    next: null,222  };223  // Append the update to the end of the list.224  const pending = queue.pending;225  if (pending === null) {226    // This is the first update. Create a circular list.227    update.next = update;228  } else {229    update.next = pending.next;230    pending.next = update;231  }232  queue.pending = update;233  const alternate = fiber.alternate;234  if (235    fiber === currentlyRenderingFiber ||236    (alternate !== null && alternate === currentlyRenderingFiber)237  ) {238    // This is a render phase update. Stash it in a lazily-created map of239    // queue -> linked list of updates. After this render pass, we'll restart240    // and apply the stashed updates on top of the work-in-progress hook.241    didScheduleRenderPhaseUpdateDuringThisPass =242      didScheduleRenderPhaseUpdate = true;243  } else {244    if (245      fiber.lanes === NoLanes &&246      (alternate === null || alternate.lanes === NoLanes)247    ) {248      // The queue is currently empty, which means we can eagerly compute the249      // next state before entering the render phase. If the new state is the250      // same as the current state, we may be able to bail out entirely.251      const lastRenderedReducer = queue.lastRenderedReducer;252      if (lastRenderedReducer !== null) {253        let prevDispatcher;254        try {255          const currentState = queue.lastRenderedState;256          const eagerState = lastRenderedReducer(currentState, action);257          // Stash the eagerly computed state, and the reducer used to compute258          // it, on the update object. If the reducer hasn't changed by the259          // time we enter the render phase, then the eager state can be used260          // without calling the reducer again.261          update.eagerReducer = lastRenderedReducer;262          update.eagerState = eagerState;263          if (is(eagerState, currentState)) {264            // Fast path. We can bail out without scheduling React to re-render.265            // It's still possible that we'll need to rebase this update later,266            // if the component re-renders for a different reason and by that267            // time the reducer has changed.268            return;269          }270        } catch (error) {271          // Suppress the error. It will throw again in the render phase.272        }273      }274    }275    // å¼å§renderé¶æ®µå¯276    scheduleUpdateOnFiber(fiber, lane, eventTime);277  }278}279export const ContextOnlyDispatcher = {280  readContext,281  useCallback: throwInvalidHookError,282  useContext: throwInvalidHookError,283  useEffect: throwInvalidHookError,284  useImperativeHandle: throwInvalidHookError,285  useLayoutEffect: throwInvalidHookError,286  useMemo: throwInvalidHookError,287  useReducer: throwInvalidHookError,288  useRef: throwInvalidHookError,289  useState: throwInvalidHookError,290  useDebugValue: throwInvalidHookError,291  useDeferredValue: throwInvalidHookError,292  useTransition: throwInvalidHookError,293  useMutableSource: throwInvalidHookError,294  useOpaqueIdentifier: throwInvalidHookError,295  unstable_isNewReconciler: enableNewReconciler,296};297const HooksDispatcherOnMount = {298  readContext,299  useCallback: mountCallback,300  useContext: readContext,301  useEffect: mountEffect,302  useImperativeHandle: mountImperativeHandle,303  useLayoutEffect: mountLayoutEffect,304  useMemo: mountMemo,305  useReducer: mountReducer,306  useRef: mountRef,307  useState: mountState,308  useDebugValue: mountDebugValue,309  useDeferredValue: mountDeferredValue,310  useTransition: mountTransition,311  useMutableSource: mountMutableSource,312  useOpaqueIdentifier: mountOpaqueIdentifier,313  unstable_isNewReconciler: enableNewReconciler,314};315const HooksDispatcherOnUpdate = {316  readContext,317  useCallback: updateCallback,318  useContext: readContext,319  useEffect: updateEffect,320  useImperativeHandle: updateImperativeHandle,321  useLayoutEffect: updateLayoutEffect,322  useMemo: updateMemo,323  useReducer: updateReducer,324  useRef: updateRef,325  useState: updateState,326  useDebugValue: updateDebugValue,327  useDeferredValue: updateDeferredValue,328  useTransition: updateTransition,329  useMutableSource: updateMutableSource,330  useOpaqueIdentifier: updateOpaqueIdentifier,331  unstable_isNewReconciler: enableNewReconciler,332};333const HooksDispatcherOnRerender = {334  readContext,335  useCallback: updateCallback,336  useContext: readContext,337  useEffect: updateEffect,338  useImperativeHandle: updateImperativeHandle,339  useLayoutEffect: updateLayoutEffect,340  useMemo: updateMemo,341  useReducer: rerenderReducer,342  useRef: updateRef,343  useState: rerenderState,344  useDebugValue: updateDebugValue,345  useDeferredValue: rerenderDeferredValue,346  useTransition: rerenderTransition,347  useMutableSource: updateMutableSource,348  useOpaqueIdentifier: rerenderOpaqueIdentifier,349  unstable_isNewReconciler: enableNewReconciler,...

index.js

Source:index.js

...87        }88        setTranslate(nextPosition)89        setInitialXPosition(nextPosition);90    }91    function updateLayoutEffect() {92        let width = getCarouselWrapperWidth() / columns;93        setItemWidth(width);94        let updateTranslate = (getCarouselWrapperWidth() * (currentSlidePosition - 1));95        setTranslate(-updateTranslate);96        setInitialXPosition(-updateTranslate);97    }98    useLayoutEffect(() => {99        let newNavProps = { navStatus };100        if (oldNavProps != 2 && (JSON.stringify(oldNavProps) !== JSON.stringify(newNavProps))) {101            setTimeout(() => {102                updateLayoutEffect();103            }, 500);104        }105        else {106            updateLayoutEffect();107        }108        setOldNavProps(newNavProps);109        if (camLayoutState != scope.state.settings) {110            setTimeout(() => {111                setCamLayout(scope.state.settings);112                scope.onSelect(scope.state.settings.rows + "x" + scope.state.settings.columns);113            }, 3000);114        }115    }, [columns, size, rows, navStatus]);116    useEffect(() => {117        let newProps = { columns, rows, extraInfo };118        if (JSON.stringify(oldProps) !== JSON.stringify(newProps)) {119            setTranslate(0);120            setInitialXPosition(0);...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.updateLayoutEffect();7  await page.screenshot({ path: 'example.png' });8  await browser.close();9})();

Using AI Code Generation

1const { updateLayoutEffect } = require('@playwright/test/lib/server/frames');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 updateLayoutEffect(page);8  await page.screenshot({ path: 'example.png' });9  await browser.close();10})();11### `updateLayoutEffect(page)`12[MIT](LICENSE)

Using AI Code Generation

1const playwright = require('playwright');2const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');3(async () => {4  const browser = await playwright.chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await updateLayoutEffect(page, () => {8  });9  await browser.close();10})();11### updateLayoutEffect(page: Page, callback: () => Promise<void>)12const playwright = require('playwright');13const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');14(async () => {15  const browser = await playwright.chromium.launch();16  const context = await browser.newContext();17  const page = await context.newPage();18  await updateLayoutEffect(page, () => {19    const element = document.querySelector('text=Learn more');20    element.scrollIntoView();21  });22  await browser.close();23})();24[Apache 2.0](LICENSE)

Using AI Code Generation

1const { updateLayoutEffect } = require("playwright/lib/server/supplements/recorder/recorderSupplement.js");2const { chromium } = require("playwright");3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  await updateLayoutEffect(page);7  await page.screenshot({ path: "google.png" });8  await browser.close();9})();10[Apache 2.0](LICENSE)

Using AI Code Generation

1const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2updateLayoutEffect(50);3const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');4updateLayoutEffect(100);5const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');6updateLayoutEffect(200);7const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');8updateLayoutEffect(500);9const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');10updateLayoutEffect(1000);11const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');12updateLayoutEffect(1500);13const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');14updateLayoutEffect(2000);15const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');16updateLayoutEffect(2500);17const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');18updateLayoutEffect(3000);19const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');20updateLayoutEffect(3500);21const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement');22updateLayoutEffect(4000);23const { updateLayoutEffect } = require('playwright/lib/server/supplements/rec

Using AI Code Generation

1const { updateLayoutEffect } = require('playwright/lib/internal/frames');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 updateLayoutEffect(page);8  await page.screenshot({ path: 'example.png' });9  await browser.close();10})();

Using AI Code Generation

1const { updateLayoutEffect } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');2updateLayoutEffect(() => {3});4const { updateLayoutEffect } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');5updateLayoutEffect(() => {6});7> GitHub [@souravdasslg](

Using AI Code Generation

1const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');2updateLayoutEffect(() => {3});4const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');5it('test', async () => {6  await updateLayoutEffect(() => {7  });8});9const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');10fixture('fixture')11  .beforeEach(async () => {12    await updateLayoutEffect(() => {13    });14  })15  .afterEach(async () => {16    await updateLayoutEffect(() => {17    });18  });19const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');20fixture('fixture');21test.beforeEach(async () => {22  await updateLayoutEffect(() => {23  });24});25test.afterEach(async () => {26  await updateLayoutEffect(() => {27  });28});29const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');30fixture('fixture');31test('test', async () => {32  await page.updateLayoutEffect(() => {33  });34});35const { updateLayoutEffect } = require('playwright/lib/client/selectorEngine');36fixture('fixture');37test('test', async () => {

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.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

View sample repo

View Documentation Sign up Free

›

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

How to use updateLayoutEffect method in Playwright Internal

Playwright tutorial

Chapters:

Run Playwright Internal automation tests on LambdaTest cloud grid

Try LambdaTest Now !!

Was this article helpful?