How to use forceUnmountCurrentAndReconcile method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

ReactFiberBeginWork.js

Source: ReactFiberBeginWork.js Github

copy
1import { NoLanes, includesSomeLane } from './ReactFiberLane';
2import {
3  hasContextChanged,
4  pushTopLevelContextObject,
5  isContextProvider,
6  pushContextProvider,
7  invalidateContextProvider,
8} from './ReactFiberContext';
9import {
10  NoFlags,
11  ForceUpdateForLegacySuspense,
12  Placement,
13  Hydrating,
14  Ref,
15  ContentReset,
16  DidCapture,
17  PerformedWork,
18} from './ReactFiberFlags';
19import { HostRoot, HostComponent, ClassComponent } from './ReactWorkTags';
20import { pushHostContainer, pushHostContext } from './ReactFiberHostContext';
21import { cloneUpdateQueue, processUpdateQueue } from './ReactUpdateQueue';
22import {
23  resetHydrationState,
24  enterHydrationState,
25  tryToClaimNextHydratableInstance,
26} from './ReactFiberHydrationContext';
27import { markSkippedUpdateLanes } from './ReactFiberWorkLoop';
28import {
29  cloneChildFibers,
30  mountChildFibers,
31  reconcileChildFibers,
32} from './ReactChildFiber';
33import { setWorkInProgressVersion } from './ReactMutableSource';
34import { shouldSetTextContent } from './ReactFiberHostConfig';
35import { resolveDefaultProps } from './ReactFiberLazyComponent';
36import { prepareToReadContext } from './ReactFiberNewContext';
37import {
38  constructClassInstance,
39  mountClassInstance,
40  resumeMountClassInstance,
41  updateClassInstance,
42} from './ReactFiberClassComponent';
43import ReactSharedInternals from '../../ReactSharedInternals';
44
45const invariant = require('invariant');
46
47const { ReactCurrentDispatcher, ReactCurrentOwner } = ReactSharedInternals;
48
49let didReceiveUpdate = false;
50
51const pushHostRootContext = (workInProgress) => {
52  const root = workInProgress.stateNode;
53  if (root.pendingContext) {
54    pushTopLevelContextObject(
55      workInProgress,
56      root.pendingContext,
57      root.pendingContext !== root.context
58    );
59  } else if (root.context) {
60    pushTopLevelContextObject(workInProgress, root.context, false);
61  }
62
63  pushHostContainer(workInProgress, root.containerInfo);
64};
65
66const bailoutOnAlreadyFinishedWork = (current, workInProgress, renderLanes) => {
67  if (current !== null) workInProgress.dependencies = current.dependencies;
68
69  markSkippedUpdateLanes(workInProgress.lanes);
70
71  if (!includesSomeLane(renderLanes, workInProgress.childLanes)) return null;
72  cloneChildFibers(current, workInProgress);
73
74  return workInProgress.child;
75};
76
77const reconcileChildren = (
78  current,
79  workInProgress,
80  nextChildren,
81  renderLanes
82) => {
83  if (current === null) {
84    workInProgress.child = mountChildFibers(
85      workInProgress,
86      null,
87      nextChildren,
88      renderLanes
89    );
90  } else {
91    workInProgress.child = reconcileChildFibers(
92      workInProgress,
93      current.child,
94      nextChildren,
95      renderLanes
96    );
97  }
98};
99
100const updateHostRoot = (current, workInProgress, renderLanes) => {
101  pushHostRootContext(workInProgress);
102  const updateQueue = workInProgress.updateQueue;
103  invariant(
104    current !== null && updateQueue !== null,
105    'If the root does not have an updateQueue, we should have already ' +
106      'bailed out. This error is likely caused by a bug in React. Please ' +
107      'file an issue.'
108  );
109
110  const nextProps = workInProgress.pendingProps;
111  const prevState = workInProgress.memoizedState;
112  const prevChildren = prevState !== null ? prevState.element : null;
113  cloneUpdateQueue(current, workInProgress);
114  processUpdateQueue(workInProgress, nextProps, null, renderLanes);
115  console.log(
116    { ...workInProgress },
117    '------updateHostRoot>processUpdateQueue:workInProgress'
118  );
119
120  const nextState = workInProgress.memoizedState;
121  const nextChildren = nextState.element;
122
123  console.log(prevChildren, nextChildren, '--------prevChildren, nextChildren');
124  if (nextChildren === prevChildren) {
125    resetHydrationState();
126    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
127  }
128
129  const root = workInProgress.stateNode;
130
131  if (root.hydrate && enterHydrationState(workInProgress)) {
132    const mutableSourceEagerHydrationData =
133      root.mutableSourceEagerHydrationData;
134    if (mutableSourceEagerHydrationData != null) {
135      for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
136        const mutableSource = mutableSourceEagerHydrationData[i];
137        const version = mutableSourceEagerHydrationData[i + 1];
138        setWorkInProgressVersion(mutableSource, version);
139      }
140    }
141
142    const child = mountChildFibers(
143      workInProgress,
144      null,
145      nextChildren,
146      renderLanes
147    );
148    workInProgress.child = child;
149
150    let node = child;
151    while (node) {
152      node.flags = (node.flags & ~Placement) | Hydrating;
153      node = node.sibling;
154    }
155  } else {
156    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
157    resetHydrationState();
158  }
159
160  return workInProgress.child;
161};
162
163const markRef = (current, workInProgress) => {
164  const ref = workInProgress.ref;
165  if (
166    (current === null && ref !== null) ||
167    (current !== null && current.ref !== ref)
168  ) {
169    workInProgress.flags |= Ref;
170  }
171};
172
173const updateHostComponent = (current, workInProgress, renderLanes) => {
174  pushHostContext(workInProgress);
175
176  if (current === null) tryToClaimNextHydratableInstance(workInProgress);
177
178  const type = workInProgress.type;
179  const nextProps = workInProgress.pendingProps;
180  const prevProps = current !== null ? current.memoizedProps : null;
181
182  let nextChildren = nextProps.children;
183  const isDirectTextChild = shouldSetTextContent(type, nextProps);
184
185  if (isDirectTextChild) {
186    nextChildren = null;
187  } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
188    workInProgress.flags |= ContentReset;
189  }
190
191  markRef(current, workInProgress);
192  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
193  return workInProgress.child;
194};
195
196const forceUnmountCurrentAndReconcile = (
197  current,
198  workInProgress,
199  nextChildren,
200  renderLanes
201) => {
202  workInProgress.child = reconcileChildFibers(
203    workInProgress,
204    current.child,
205    null,
206    renderLanes
207  );
208
209  workInProgress.child = reconcileChildFibers(
210    workInProgress,
211    null,
212    nextChildren,
213    renderLanes
214  );
215};
216
217const finishClassComponent = (
218  current,
219  workInProgress,
220  Component,
221  shouldUpdate,
222  hasContext,
223  renderLanes
224) => {
225  markRef(current, workInProgress);
226
227  const didCaptureError = (workInProgress.flags & DidCapture) !== NoFlags;
228
229  if (!shouldUpdate && !didCaptureError) {
230    if (hasContext) {
231      invalidateContextProvider(workInProgress, Component, false);
232    }
233
234    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
235  }
236
237  const instance = workInProgress.stateNode;
238
239  ReactCurrentOwner.current = workInProgress;
240  let nextChildren;
241  if (
242    didCaptureError &&
243    typeof Component.getDerivedStateFromError !== 'function'
244  ) {
245    nextChildren = null;
246  } else {
247    nextChildren = instance.render();
248  }
249
250  console.log({ ...nextChildren }, '-------finishClassComponent:nextChildren');
251
252  workInProgress.flags |= PerformedWork;
253  if (current !== null && didCaptureError) {
254    forceUnmountCurrentAndReconcile(
255      current,
256      workInProgress,
257      nextChildren,
258      renderLanes
259    );
260  } else {
261    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
262  }
263
264  workInProgress.memoizedState = instance.state;
265
266  if (hasContext) {
267    invalidateContextProvider(workInProgress, Component, true);
268  }
269
270  return workInProgress.child;
271};
272
273const updateClassComponent = (
274  current,
275  workInProgress,
276  Component,
277  nextProps,
278  renderLanes
279) => {
280  let hasContext;
281  if (isContextProvider(Component)) {
282    hasContext = true;
283    pushContextProvider(workInProgress);
284  } else {
285    hasContext = false;
286  }
287  prepareToReadContext(workInProgress, renderLanes);
288
289  const instance = workInProgress.stateNode;
290  let shouldUpdate;
291  if (instance === null) {
292    if (current !== null) {
293      current.alternate = null;
294      workInProgress.alternate = null;
295      workInProgress.flags |= Placement;
296    }
297
298    constructClassInstance(workInProgress, Component, nextProps);
299    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
300    shouldUpdate = true;
301  } else if (current === null) {
302    shouldUpdate = resumeMountClassInstance(
303      workInProgress,
304      Component,
305      nextProps,
306      renderLanes
307    );
308  } else {
309    shouldUpdate = updateClassInstance(
310      current,
311      workInProgress,
312      Component,
313      nextProps,
314      renderLanes
315    );
316  }
317
318  const nextUnitOfWork = finishClassComponent(
319    current,
320    workInProgress,
321    Component,
322    shouldUpdate,
323    hasContext,
324    renderLanes
325  );
326
327  return nextUnitOfWork;
328};
329
330const beginWork = (current, workInProgress, renderLanes) => {
331  const updateLanes = workInProgress.lanes;
332
333  if (current !== null) {
334    const oldProps = current.memoizedProps;
335    const newProps = workInProgress.pendingProps;
336
337    if (oldProps !== newProps || hasContextChanged()) {
338      didReceiveUpdate = true;
339    } else if (!includesSomeLane(renderLanes, updateLanes)) {
340      //
341    } else {
342      if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
343        didReceiveUpdate = true;
344      } else {
345        didReceiveUpdate = false;
346      }
347    }
348  } else didReceiveUpdate = false;
349
350  workInProgress.lanes = NoLanes;
351
352  switch (workInProgress.tag) {
353    // case IndeterminateComponent: {
354    //   return mountIndeterminateComponent(
355    //     current,
356    //     workInProgress,
357    //     workInProgress.type,
358    //     renderLanes,
359    //   );
360    // }
361    // case LazyComponent: {
362    //   const elementType = workInProgress.elementType;
363    //   return mountLazyComponent(
364    //     current,
365    //     workInProgress,
366    //     elementType,
367    //     updateLanes,
368    //     renderLanes,
369    //   );
370    // }
371    // case FunctionComponent: {
372    //   const Component = workInProgress.type;
373    //   const unresolvedProps = workInProgress.pendingProps;
374    //   const resolvedProps =
375    //     workInProgress.elementType === Component
376    //       ? unresolvedProps
377    //       : resolveDefaultProps(Component, unresolvedProps);
378    //   return updateFunctionComponent(
379    //     current,
380    //     workInProgress,
381    //     Component,
382    //     resolvedProps,
383    //     renderLanes,
384    //   );
385    // }
386    case ClassComponent: {
387      const Component = workInProgress.type;
388      const unresolvedProps = workInProgress.pendingProps;
389      const resolvedProps =
390        workInProgress.elementType === Component
391          ? unresolvedProps
392          : resolveDefaultProps(Component, unresolvedProps);
393      return updateClassComponent(
394        current,
395        workInProgress,
396        Component,
397        resolvedProps,
398        renderLanes
399      );
400    }
401    case HostRoot:
402      return updateHostRoot(current, workInProgress, renderLanes);
403    case HostComponent:
404      return updateHostComponent(current, workInProgress, renderLanes);
405    // case HostText:
406    //   return updateHostText(current, workInProgress);
407    // case SuspenseComponent:
408    //   return updateSuspenseComponent(current, workInProgress, renderLanes);
409    // case HostPortal:
410    //   return updatePortalComponent(current, workInProgress, renderLanes);
411    // case ForwardRef: {
412    //   const type = workInProgress.type;
413    //   const unresolvedProps = workInProgress.pendingProps;
414    //   const resolvedProps =
415    //     workInProgress.elementType === type
416    //       ? unresolvedProps
417    //       : resolveDefaultProps(type, unresolvedProps);
418    //   return updateForwardRef(
419    //     current,
420    //     workInProgress,
421    //     type,
422    //     resolvedProps,
423    //     renderLanes,
424    //   );
425    // }
426    // case Fragment:
427    //   return updateFragment(current, workInProgress, renderLanes);
428    // case Mode:
429    //   return updateMode(current, workInProgress, renderLanes);
430    // case Profiler:
431    //   return updateProfiler(current, workInProgress, renderLanes);
432    // case ContextProvider:
433    //   return updateContextProvider(current, workInProgress, renderLanes);
434    // case ContextConsumer:
435    //   return updateContextConsumer(current, workInProgress, renderLanes);
436    // case MemoComponent: {
437    //   const type = workInProgress.type;
438    //   const unresolvedProps = workInProgress.pendingProps;
439    //   // Resolve outer props first, then resolve inner props.
440    //   let resolvedProps = resolveDefaultProps(type, unresolvedProps);
441    //   resolvedProps = resolveDefaultProps(type.type, resolvedProps);
442    //   return updateMemoComponent(
443    //     current,
444    //     workInProgress,
445    //     type,
446    //     resolvedProps,
447    //     updateLanes,
448    //     renderLanes,
449    //   );
450    // }
451    // case SimpleMemoComponent: {
452    //   return updateSimpleMemoComponent(
453    //     current,
454    //     workInProgress,
455    //     workInProgress.type,
456    //     workInProgress.pendingProps,
457    //     updateLanes,
458    //     renderLanes,
459    //   );
460    // }
461    // case IncompleteClassComponent: {
462    //   const Component = workInProgress.type;
463    //   const unresolvedProps = workInProgress.pendingProps;
464    //   const resolvedProps =
465    //     workInProgress.elementType === Component
466    //       ? unresolvedProps
467    //       : resolveDefaultProps(Component, unresolvedProps);
468    //   return mountIncompleteClassComponent(
469    //     current,
470    //     workInProgress,
471    //     Component,
472    //     resolvedProps,
473    //     renderLanes,
474    //   );
475    // }
476    // case SuspenseListComponent: {
477    //   return updateSuspenseListComponent(current, workInProgress, renderLanes);
478    // }
479    // case FundamentalComponent: {
480    //   if (enableFundamentalAPI) {
481    //     return updateFundamentalComponent(current, workInProgress, renderLanes);
482    //   }
483    //   break;
484    // }
485    // case ScopeComponent: {
486    //   if (enableScopeAPI) {
487    //     return updateScopeComponent(current, workInProgress, renderLanes);
488    //   }
489    //   break;
490    // }
491    // case Block: {
492    //   if (enableBlocksAPI) {
493    //     const block = workInProgress.type;
494    //     const props = workInProgress.pendingProps;
495    //     return updateBlock(current, workInProgress, block, props, renderLanes);
496    //   }
497    //   break;
498    // }
499    // case OffscreenComponent: {
500    //   return updateOffscreenComponent(current, workInProgress, renderLanes);
501    // }
502    // case LegacyHiddenComponent: {
503    //   return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
504    // }
505  }
506};
507
508const markWorkInProgressReceivedUpdate = () => {
509  didReceiveUpdate = true;
510};
511
512export { beginWork, markWorkInProgressReceivedUpdate };
513
Full Screen

0__index.js

Source: 0__index.js Github

copy
1function beginWork$1(current$$1, workInProgress, renderExpirationTime) {
2    var updateExpirationTime = workInProgress.expirationTime;
3
4    {
5        if (workInProgress._debugNeedsRemount && current$$1 !== null) {
6            // This will restart the begin phase with a new fiber.
7            return remountFiber(current$$1, workInProgress, createFiberFromTypeAndProps(workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.expirationTime));
8        }
9    }
10
11    if (current$$1 !== null) {
12        var oldProps = current$$1.memoizedProps;
13        var newProps = workInProgress.pendingProps;
14
15        if (oldProps !== newProps || hasContextChanged() || ( // Force a re-render if the implementation changed due to hot reload:
16                workInProgress.type !== current$$1.type)) {
17            // If props or context changed, mark the fiber as having performed work.
18            // This may be unset if the props are determined to be equal later (memo).
19            didReceiveUpdate = true;
20        } else if (updateExpirationTime < renderExpirationTime) {
21            didReceiveUpdate = false; // This fiber does not have any pending work. Bailout without entering
22            // the begin phase. There's still some bookkeeping we that needs to be done
23            // in this optimized path, mostly pushing stuff onto the stack.
24
25            switch (workInProgress.tag) {
26                case HostRoot:
27                    pushHostRootContext(workInProgress);
28                    resetHydrationState();
29                    break;
30
31                case HostComponent:
32                    pushHostContext(workInProgress);
33
34                    if (workInProgress.mode & ConcurrentMode && renderExpirationTime !== Never && shouldDeprioritizeSubtree(workInProgress.type, newProps)) {
35                        if (enableSchedulerTracing) {
36                            markSpawnedWork(Never);
37                        } // Schedule this fiber to re-render at offscreen priority. Then bailout.
38
39
40                        workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
41                        return null;
42                    }
43
44                    break;
45
46                case ClassComponent: {
47                    var Component = workInProgress.type;
48
49                    if (isContextProvider(Component)) {
50                        pushContextProvider(workInProgress);
51                    }
52
53                    break;
54                }
55
56                case HostPortal:
57                    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
58                    break;
59
60                case ContextProvider: {
61                    var newValue = workInProgress.memoizedProps.value;
62                    pushProvider(workInProgress, newValue);
63                    break;
64                }
65
66                case Profiler:
67                    if (enableProfilerTimer) {
68                        workInProgress.effectTag |= Update;
69                    }
70
71                    break;
72
73                case SuspenseComponent: {
74                    var state = workInProgress.memoizedState;
75
76                    if (state !== null) {
77                        if (enableSuspenseServerRenderer) {
78                            if (state.dehydrated !== null) {
79                                pushSuspenseContext(workInProgress, setDefaultShallowSuspenseContext(suspenseStackCursor.current)); // We know that this component will suspend again because if it has
80                                // been unsuspended it has committed as a resolved Suspense component.
81                                // If it needs to be retried, it should have work scheduled on it.
82
83                                workInProgress.effectTag |= DidCapture;
84                                break;
85                            }
86                        } // If this boundary is currently timed out, we need to decide
87                        // whether to retry the primary children, or to skip over it and
88                        // go straight to the fallback. Check the priority of the primary
89                        // child fragment.
90
91
92                        var primaryChildFragment = workInProgress.child;
93                        var primaryChildExpirationTime = primaryChildFragment.childExpirationTime;
94
95                        if (primaryChildExpirationTime !== NoWork && primaryChildExpirationTime >= renderExpirationTime) {
96                            // The primary children have pending work. Use the normal path
97                            // to attempt to render the primary children again.
98                            return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
99                        } else {
100                            pushSuspenseContext(workInProgress, setDefaultShallowSuspenseContext(suspenseStackCursor.current)); // The primary children do not have pending work with sufficient
101                            // priority. Bailout.
102
103                            var child = bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
104
105                            if (child !== null) {
106                                // The fallback children have pending work. Skip over the
107                                // primary children and work on the fallback.
108                                return child.sibling;
109                            } else {
110                                return null;
111                            }
112                        }
113                    } else {
114                        pushSuspenseContext(workInProgress, setDefaultShallowSuspenseContext(suspenseStackCursor.current));
115                    }
116
117                    break;
118                }
119
120                case SuspenseListComponent: {
121                    var didSuspendBefore = (current$$1.effectTag & DidCapture) !== NoEffect;
122                    var hasChildWork = workInProgress.childExpirationTime >= renderExpirationTime;
123
124                    if (didSuspendBefore) {
125                        if (hasChildWork) {
126                            // If something was in fallback state last time, and we have all the
127                            // same children then we're still in progressive loading state.
128                            // Something might get unblocked by state updates or retries in the
129                            // tree which will affect the tail. So we need to use the normal
130                            // path to compute the correct tail.
131                            return updateSuspenseListComponent(current$$1, workInProgress, renderExpirationTime);
132                        } // If none of the children had any work, that means that none of
133                        // them got retried so they'll still be blocked in the same way
134                        // as before. We can fast bail out.
135
136
137                        workInProgress.effectTag |= DidCapture;
138                    } // If nothing suspended before and we're rendering the same children,
139                    // then the tail doesn't matter. Anything new that suspends will work
140                    // in the "together" mode, so we can continue from the state we had.
141
142
143                    var renderState = workInProgress.memoizedState;
144
145                    if (renderState !== null) {
146                        // Reset to the "together" mode in case we've started a different
147                        // update in the past but didn't complete it.
148                        renderState.rendering = null;
149                        renderState.tail = null;
150                    }
151
152                    pushSuspenseContext(workInProgress, suspenseStackCursor.current);
153
154                    if (hasChildWork) {
155                        break;
156                    } else {
157                        // If none of the children had any work, that means that none of
158                        // them got retried so they'll still be blocked in the same way
159                        // as before. We can fast bail out.
160                        return null;
161                    }
162                }
163            }
164
165            return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
166        } else {
167            // An update was scheduled on this fiber, but there are no new props
168            // nor legacy context. Set this to false. If an update queue or context
169            // consumer produces a changed value, it will set this to true. Otherwise,
170            // the component will assume the children have not changed and bail out.
171            didReceiveUpdate = false;
172        }
173    } else {
174        didReceiveUpdate = false;
175    } // Before entering the begin phase, clear the expiration time.
176
177
178    workInProgress.expirationTime = NoWork;
179
180    switch (workInProgress.tag) {
181        case IndeterminateComponent: {
182            return mountIndeterminateComponent(current$$1, workInProgress, workInProgress.type, renderExpirationTime);
183        }
184
185        case LazyComponent: {
186            var elementType = workInProgress.elementType;
187            return mountLazyComponent(current$$1, workInProgress, elementType, updateExpirationTime, renderExpirationTime);
188        }
189
190        case FunctionComponent: {
191            var _Component = workInProgress.type;
192            var unresolvedProps = workInProgress.pendingProps;
193            var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
194            return updateFunctionComponent(current$$1, workInProgress, _Component, resolvedProps, renderExpirationTime);
195        }
196
197        case ClassComponent: {
198            var _Component2 = workInProgress.type;
199            var _unresolvedProps = workInProgress.pendingProps;
200
201            var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
202
203            return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
204        }
205
206        case HostRoot:
207            return updateHostRoot(current$$1, workInProgress, renderExpirationTime);
208
209        case HostComponent:
210            return updateHostComponent(current$$1, workInProgress, renderExpirationTime);
211
212        case HostText:
213            return updateHostText(current$$1, workInProgress);
214
215        case SuspenseComponent:
216            return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
217
218        case HostPortal:
219            return updatePortalComponent(current$$1, workInProgress, renderExpirationTime);
220
221        case ForwardRef: {
222            var type = workInProgress.type;
223            var _unresolvedProps2 = workInProgress.pendingProps;
224
225            var _resolvedProps2 = workInProgress.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
226
227            return updateForwardRef(current$$1, workInProgress, type, _resolvedProps2, renderExpirationTime);
228        }
229
230        case Fragment:
231            return updateFragment(current$$1, workInProgress, renderExpirationTime);
232
233        case Mode:
234            return updateMode(current$$1, workInProgress, renderExpirationTime);
235
236        case Profiler:
237            return updateProfiler(current$$1, workInProgress, renderExpirationTime);
238
239        case ContextProvider:
240            return updateContextProvider(current$$1, workInProgress, renderExpirationTime);
241
242        case ContextConsumer:
243            return updateContextConsumer(current$$1, workInProgress, renderExpirationTime);
244
245        case MemoComponent: {
246            var _type2 = workInProgress.type;
247            var _unresolvedProps3 = workInProgress.pendingProps; // Resolve outer props first, then resolve inner props.
248
249            var _resolvedProps3 = resolveDefaultProps(_type2, _unresolvedProps3);
250
251            {
252                if (workInProgress.type !== workInProgress.elementType) {
253                    var outerPropTypes = _type2.propTypes;
254
255                    if (outerPropTypes) {
256                        checkPropTypes(outerPropTypes, _resolvedProps3, // Resolved for outer only
257                            'prop', getComponentName(_type2), getCurrentFiberStackInDev);
258                    }
259                }
260            }
261
262            _resolvedProps3 = resolveDefaultProps(_type2.type, _resolvedProps3);
263            return updateMemoComponent(current$$1, workInProgress, _type2, _resolvedProps3, updateExpirationTime, renderExpirationTime);
264        }
265
266        case SimpleMemoComponent: {
267            return updateSimpleMemoComponent(current$$1, workInProgress, workInProgress.type, workInProgress.pendingProps, updateExpirationTime, renderExpirationTime);
268        }
269
270        case IncompleteClassComponent: {
271            var _Component3 = workInProgress.type;
272            var _unresolvedProps4 = workInProgress.pendingProps;
273
274            var _resolvedProps4 = workInProgress.elementType === _Component3 ? _unresolvedProps4 : resolveDefaultProps(_Component3, _unresolvedProps4);
275
276            return mountIncompleteClassComponent(current$$1, workInProgress, _Component3, _resolvedProps4, renderExpirationTime);
277        }
278
279        case SuspenseListComponent: {
280            return updateSuspenseListComponent(current$$1, workInProgress, renderExpirationTime);
281        }
282
283        case FundamentalComponent: {
284            if (enableFundamentalAPI) {
285                return updateFundamentalComponent$1(current$$1, workInProgress, renderExpirationTime);
286            }
287
288            break;
289        }
290
291        case ScopeComponent: {
292            if (enableScopeAPI) {
293                return updateScopeComponent(current$$1, workInProgress, renderExpirationTime);
294            }
295
296            break;
297        }
298    }
299
300    (function () {
301        {
302            {
303                throw ReactError(Error("Unknown unit of work tag (" + workInProgress.tag + "). This error is likely caused by a bug in React. Please file an issue."));
304            }
305        }
306    })();
307}
308
309
310
311function updateClassComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
312    {
313        if (workInProgress.type !== workInProgress.elementType) {
314            // Lazy component props can't be validated in createElement
315            // because they're only guaranteed to be resolved here.
316            var innerPropTypes = Component.propTypes;
317
318            if (innerPropTypes) {
319                checkPropTypes(innerPropTypes, nextProps, // Resolved props
320                    'prop', getComponentName(Component), getCurrentFiberStackInDev);
321            }
322        }
323    } // Push context providers early to prevent context stack mismatches.
324    // During mounting we don't know the child context yet as the instance doesn't exist.
325    // We will invalidate the child context in finishClassComponent() right after rendering.
326
327
328    var hasContext;
329
330    if (isContextProvider(Component)) {
331        hasContext = true;
332        pushContextProvider(workInProgress);
333    } else {
334        hasContext = false;
335    }
336
337    prepareToReadContext(workInProgress, renderExpirationTime);
338    var instance = workInProgress.stateNode;
339    var shouldUpdate;
340
341    if (instance === null) {
342        if (current$$1 !== null) {
343            // An class component without an instance only mounts if it suspended
344            // inside a non- concurrent tree, in an inconsistent state. We want to
345            // tree it like a new mount, even though an empty version of it already
346            // committed. Disconnect the alternate pointers.
347            current$$1.alternate = null;
348            workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
349
350            workInProgress.effectTag |= Placement;
351        } // In the initial pass we might need to construct the instance.
352
353
354        constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
355        mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
356        shouldUpdate = true;
357    } else if (current$$1 === null) {
358        // In a resume, we'll already have an instance we can reuse.
359        shouldUpdate = resumeMountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
360    } else {
361        shouldUpdate = updateClassInstance(current$$1, workInProgress, Component, nextProps, renderExpirationTime);
362    }
363
364    var nextUnitOfWork = finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);
365
366    {
367        var inst = workInProgress.stateNode;
368
369        if (inst.props !== nextProps) {
370            !didWarnAboutReassigningProps ? warning$1(false, 'It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', getComponentName(workInProgress.type) || 'a component') : void 0;
371            didWarnAboutReassigningProps = true;
372        }
373    }
374
375    return nextUnitOfWork;
376}
377
378function finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime) {
379    // Refs should update even if shouldComponentUpdate returns false
380    markRef(current$$1, workInProgress);
381    var didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
382
383    if (!shouldUpdate && !didCaptureError) {
384        // Context providers should defer to sCU for rendering
385        if (hasContext) {
386            invalidateContextProvider(workInProgress, Component, false);
387        }
388
389        return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
390    }
391
392    var instance = workInProgress.stateNode; // Rerender
393
394    ReactCurrentOwner$3.current = workInProgress;
395    var nextChildren;
396
397    if (didCaptureError && typeof Component.getDerivedStateFromError !== 'function') {
398        // If we captured an error, but getDerivedStateFrom catch is not defined,
399        // unmount all the children. componentDidCatch will schedule an update to
400        // re-render a fallback. This is temporary until we migrate everyone to
401        // the new API.
402        // TODO: Warn in a future release.
403        nextChildren = null;
404
405        if (enableProfilerTimer) {
406            stopProfilerTimerIfRunning(workInProgress);
407        }
408    } else {
409        {
410            ('render');
411            nextChildrsetCurrentPhaseen = instance.render();
412
413            if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
414                instance.render();
415            }
416
417            setCurrentPhase(null);
418        }
419    } // React DevTools reads this flag.
420
421
422    workInProgress.effectTag |= PerformedWork;
423
424    if (current$$1 !== null && didCaptureError) {
425        // If we're recovering from an error, reconcile without reusing any of
426        // the existing children. Conceptually, the normal children and the children
427        // that are shown on error are two different sets, so we shouldn't reuse
428        // normal children even if their identities match.
429        forceUnmountCurrentAndReconcile(current$$1, workInProgress, nextChildren, renderExpirationTime);
430    } else {
431        reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
432    } // Memoize state using the values we just used to render.
433    // TODO: Restructure so we never read values from the instance.
434
435
436    workInProgress.memoizedState = instance.state; // The context might have changed so we need to recalculate it.
437
438    if (hasContext) {
439        invalidateContextProvider(workInProgress, Component, true);
440    }
441
442    return workInProgress.child;
443}
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)