How to use updateLayoutEffect method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberHooks.new.js

Source:ReactFiberHooks.new.js Github

copy

Full Screen

...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 (...

Full Screen

Full Screen

ReactFiberHooks.old.js

Source:ReactFiberHooks.old.js Github

copy

Full Screen

...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 (...

Full Screen

Full Screen

ReactFiberHooks.js

Source:ReactFiberHooks.js Github

copy

Full Screen

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,...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...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);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 () => {

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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 DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful