[Fiber] Double invoke Effects in Strict Mode during Hydration (#35961)

Author: eps1lon

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -20,6 +20,7 @@ let Scheduler;
 letSuspense;
 letSuspenseList;
 letuseSyncExternalStore;
+letuse;
 letact;
 letIdleEventPriority;
 letwaitForAll;
@@ -116,6 +117,7 @@ describe('ReactDOMServerPartialHydration', () => {
 Activity=React.Activity;
 Suspense=React.Suspense;
 useSyncExternalStore=React.useSyncExternalStore;
+use=React.use;
 if(gate(flags=>flags.enableSuspenseList)){
 SuspenseList=React.unstable_SuspenseList;
 }
@@ -256,6 +258,77 @@ describe('ReactDOMServerPartialHydration', () => {
 expect(container.textContent).toBe('HelloHello');
 });
 
+it('replays effects when a suspended boundary hydrates in StrictMode',async()=>{
+constlog=[];
+letsuspend=false;
+letresolve;
+constpromise=newPromise(resolvePromise=>(resolve=resolvePromise));
+
+functionEffectfulChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return'Hello';
+}
+
+functionChild(){
+if(suspend){
+use(promise);
+}
+return<EffectfulChild/>;
+}
+
+functionApp(){
+return(
+<Suspensefallback="Loading...">
+<Child/>
+</Suspense>
+);
+}
+
+constelement=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+suspend=false;
+constfinalHTML=ReactDOMServer.renderToString(element);
+constcontainer=document.createElement('div');
+container.innerHTML=finalHTML;
+expect(container.textContent).toBe('Hello');
+
+suspend=true;
+ReactDOMClient.hydrateRoot(container,element);
+awaitwaitForAll([]);
+expect(log).toEqual([]);
+expect(container.textContent).toBe('Hello');
+
+suspend=false;
+resolve();
+awaitpromise;
+awaitwaitForAll([]);
+
+expect(container.textContent).toBe('Hello');
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('falls back to client rendering boundary on mismatch',async()=>{
 letclient=false;
 letsuspend=false;

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -392,6 +392,56 @@ describe('ReactDOMServerHydration', () => {
 expect(element.textContent).toBe('Hi');
 });
 
+it('replays effects when hydrating a StrictMode subtree',async()=>{
+constlog=[];
+functionChild(){
+React.useLayoutEffect(()=>{
+log.push('layout mount');
+return()=>log.push('layout unmount');
+},[]);
+React.useEffect(()=>{
+log.push('effect mount');
+return()=>log.push('effect unmount');
+},[]);
+return<span>Hello</span>;
+}
+
+functionApp(){
+return(
+<div>
+<Child/>
+</div>
+);
+}
+
+constmarkup=(
+<React.StrictMode>
+<App/>
+</React.StrictMode>
+);
+
+constelement=document.createElement('div');
+element.innerHTML=ReactDOMServer.renderToString(markup);
+expect(element.textContent).toBe('Hello');
+
+awaitact(()=>{
+ReactDOMClient.hydrateRoot(element,markup);
+});
+
+if(__DEV__){
+expect(log).toEqual([
+'layout mount',
+'effect mount',
+'layout unmount',
+'effect unmount',
+'layout mount',
+'effect mount',
+]);
+}else{
+expect(log).toEqual(['layout mount','effect mount']);
+}
+});
+
 it('should be able to render and hydrate forwardRef components',async()=>{
 constFunctionComponent=({label, forwardedRef})=>(
 <divref={forwardedRef}>{label}</div>

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -88,6 +88,7 @@ import {
 NoFlags,
 PerformedWork,
 Placement,
+PlacementDEV,
 Hydrating,
 Callback,
 ContentReset,
@@ -1080,7 +1081,8 @@ function updateDehydratedActivityComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{
@@ -1899,7 +1901,8 @@ function updateHostRoot(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
- node.flags=(node.flags&~Placement)|Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+ node.flags=(node.flags&~Placement)|Hydrating|PlacementDEV;
 node=node.sibling;
 }
 }
@@ -3104,7 +3107,8 @@ function updateDehydratedSuspenseComponent(
 // Conceptually this is similar to Placement in that a new subtree is
 // inserted into the React tree here. It just happens to not need DOM
 // mutations because it already exists.
-primaryChildFragment.flags|=Hydrating;
+// We should still treat it as a newly inserted Fiber to double invoke Strict Effects.
+primaryChildFragment.flags|=Hydrating|PlacementDEV;
 returnprimaryChildFragment;
 }
 }else{

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -5312,9 +5312,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
 if(fiber.memoizedState===null){
 // Only consider Offscreen that is visible.
 // TODO (Offscreen) Handle manual mode.
-if(isInStrictMode&&fiber.flags&Visibility){
-// Double invoke effects on Offscreen's subtree only
+if(isInStrictMode&&fiber.flags&(Visibility|PlacementDEV)){
+// Double invoke effects on Offscreen's subtree
 // if it is visible and its visibility has changed.
+// However, we also need to consider newly hydrated Offscreen because their
+// visibility flags might not have changed.
 runWithFiberInDEV(fiber,doubleInvokeEffectsOnFiber,root,fiber);
 }elseif(fiber.subtreeFlags&PlacementDEV){
 // Something in the subtree could have been suspended.

packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js

@@ -230,4 +230,127 @@ describe('Activity StrictMode', () => {
 'Child mount',
 ]);
 });
+
+// @gate __DEV__
+it('should double invoke effects on newly inserted children while Activity becomes visible',async()=>{
+functionParent({children}){
+log.push('Parent rendered');
+React.useEffect(()=>{
+log.push('Parent mount');
+return()=>{
+log.push('Parent unmount');
+};
+});
+
+return<div>{children}</div>;
+}
+
+functionChild({name}){
+log.push(`Child ${name} rendered`);
+React.useEffect(()=>{
+log.push(`Child ${name} mount`);
+return()=>{
+log.push(`Child ${name} unmount`);
+};
+});
+
+returnnull;
+}
+
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="hidden">
+<Parent/>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual(['Parent rendered','Parent rendered']);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child one mount',
+'Parent mount',
+// StrictMode double invocation
+'Parent unmount',
+'Child one unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+// single Effect invocation. No double invocation on update.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Parent mount',
+]);
+
+log.length=0;
+awaitact(()=>{
+ReactNoop.render(
+<React.StrictMode>
+<Activitymode="visible">
+<Parent>
+<Childname="one"/>
+<Childname="two"/>
+</Parent>
+</Activity>
+</React.StrictMode>,
+);
+});
+
+expect(log).toEqual([
+'Parent rendered',
+'Parent rendered',
+'Child one rendered',
+'Child one rendered',
+'Child two rendered',
+'Child two rendered',
+// single Effect invocation for existing Components.
+'Child one unmount',
+'Parent unmount',
+'Child one mount',
+'Child two mount',
+'Parent mount',
+// Double Effect invocation for new Component "two"
+'Child two unmount',
+'Child two mount',
+]);
+});
 });