Skip to content

Commit 3fbebb2

Browse files
gaearongaearon
authored
Revert "Double-render function components with Hooks in DEV in StrictMode" (#14652)
* Revert "Revert "Disallow reading context during useMemo etc" (#14651)" This reverts commit 5fce648. * Revert "Add test coverage for readContext() on the server (#14649)" This reverts commit fe2ecd2. * Revert "Warn about incorrect use of useImperativeHandle() (#14647)" This reverts commit 8f45a7f. * Revert "Disallow reading context during useMemo etc (#14648)" This reverts commit 1fcbd22. * Revert "Warn about refs on lazy function components (#14645)" This reverts commit 2a084f5. * Revert "Fix typo (#14560)" This reverts commit b5a3df6. * Revert "fix typo (#14316)" This reverts commit 9c146e6. * Revert "Mention forwardRef() in <Fn ref={...} /> errors and warnings (#14644)" This reverts commit baa6d40. * Revert "Double-render function components with Hooks in DEV in StrictMode (#14643)" This reverts commit a1414e8.
1 parent 5fce648 commit 3fbebb2

2 files changed

Lines changed: 0 additions & 273 deletions

File tree

‎packages/react-reconciler/src/ReactFiberBeginWork.js‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -250,23 +250,6 @@ function updateForwardRef(
250250
ref,
251251
renderExpirationTime,
252252
);
253-
if(
254-
debugRenderPhaseSideEffects||
255-
(debugRenderPhaseSideEffectsForStrictMode&&
256-
workInProgress.mode&StrictMode)
257-
){
258-
// Only double-render components with Hooks
259-
if(workInProgress.memoizedState!==null){
260-
renderWithHooks(
261-
current,
262-
workInProgress,
263-
render,
264-
nextProps,
265-
ref,
266-
renderExpirationTime,
267-
);
268-
}
269-
}
270253
setCurrentPhase(null);
271254
}else{
272255
nextChildren=renderWithHooks(
@@ -560,23 +543,6 @@ function updateFunctionComponent(
560543
context,
561544
renderExpirationTime,
562545
);
563-
if(
564-
debugRenderPhaseSideEffects||
565-
(debugRenderPhaseSideEffectsForStrictMode&&
566-
workInProgress.mode&StrictMode)
567-
){
568-
// Only double-render components with Hooks
569-
if(workInProgress.memoizedState!==null){
570-
renderWithHooks(
571-
current,
572-
workInProgress,
573-
Component,
574-
nextProps,
575-
context,
576-
renderExpirationTime,
577-
);
578-
}
579-
}
580546
setCurrentPhase(null);
581547
}else{
582548
nextChildren=renderWithHooks(
@@ -1244,25 +1210,6 @@ function mountIndeterminateComponent(
12441210
}else{
12451211
// Proceed under the assumption that this is a function component
12461212
workInProgress.tag=FunctionComponent;
1247-
if(__DEV__){
1248-
if(
1249-
debugRenderPhaseSideEffects||
1250-
(debugRenderPhaseSideEffectsForStrictMode&&
1251-
workInProgress.mode&StrictMode)
1252-
){
1253-
// Only double-render components with Hooks
1254-
if(workInProgress.memoizedState!==null){
1255-
renderWithHooks(
1256-
null,
1257-
workInProgress,
1258-
Component,
1259-
props,
1260-
context,
1261-
renderExpirationTime,
1262-
);
1263-
}
1264-
}
1265-
}
12661213
reconcileChildren(null,workInProgress,value,renderExpirationTime);
12671214
if(__DEV__){
12681215
validateFunctionComponentInDev(workInProgress,Component);

‎packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js‎

Lines changed: 0 additions & 220 deletions
Original file line numberDiff line numberDiff line change
@@ -699,224 +699,4 @@ describe('ReactHooks', () => {
699699
'Hooks can only be called inside the body of a function component',
700700
);
701701
});
702-
703-
it('double-invokes components with Hooks in Strict Mode',()=>{
704-
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode=true;
705-
706-
const{useState, StrictMode}=React;
707-
letrenderCount=0;
708-
709-
functionNoHooks(){
710-
renderCount++;
711-
return<div/>;
712-
}
713-
714-
functionHasHooks(){
715-
useState(0);
716-
renderCount++;
717-
return<div/>;
718-
}
719-
720-
constFwdRef=React.forwardRef((props,ref)=>{
721-
renderCount++;
722-
return<div/>;
723-
});
724-
725-
constFwdRefHasHooks=React.forwardRef((props,ref)=>{
726-
useState(0);
727-
renderCount++;
728-
return<div/>;
729-
});
730-
731-
constMemo=React.memo(props=>{
732-
renderCount++;
733-
return<div/>;
734-
});
735-
736-
constMemoHasHooks=React.memo(props=>{
737-
useState(0);
738-
renderCount++;
739-
return<div/>;
740-
});
741-
742-
functionFactory(){
743-
return{
744-
state: {},
745-
render(){
746-
renderCount++;
747-
return<div/>;
748-
},
749-
};
750-
}
751-
752-
letrenderer=ReactTestRenderer.create(null);
753-
754-
renderCount=0;
755-
renderer.update(<NoHooks/>);
756-
expect(renderCount).toBe(1);
757-
renderCount=0;
758-
renderer.update(<NoHooks/>);
759-
expect(renderCount).toBe(1);
760-
renderCount=0;
761-
renderer.update(
762-
<StrictMode>
763-
<NoHooks/>
764-
</StrictMode>,
765-
);
766-
expect(renderCount).toBe(1);
767-
renderCount=0;
768-
renderer.update(
769-
<StrictMode>
770-
<NoHooks/>
771-
</StrictMode>,
772-
);
773-
expect(renderCount).toBe(1);
774-
775-
renderCount=0;
776-
renderer.update(<FwdRef/>);
777-
expect(renderCount).toBe(1);
778-
renderCount=0;
779-
renderer.update(<FwdRef/>);
780-
expect(renderCount).toBe(1);
781-
renderCount=0;
782-
renderer.update(
783-
<StrictMode>
784-
<FwdRef/>
785-
</StrictMode>,
786-
);
787-
expect(renderCount).toBe(1);
788-
renderCount=0;
789-
renderer.update(
790-
<StrictMode>
791-
<FwdRef/>
792-
</StrictMode>,
793-
);
794-
expect(renderCount).toBe(1);
795-
796-
renderCount=0;
797-
renderer.update(<Memoarg={1}/>);
798-
expect(renderCount).toBe(1);
799-
renderCount=0;
800-
renderer.update(<Memoarg={2}/>);
801-
expect(renderCount).toBe(1);
802-
renderCount=0;
803-
renderer.update(
804-
<StrictMode>
805-
<Memoarg={1}/>
806-
</StrictMode>,
807-
);
808-
expect(renderCount).toBe(1);
809-
renderCount=0;
810-
renderer.update(
811-
<StrictMode>
812-
<Memoarg={2}/>
813-
</StrictMode>,
814-
);
815-
expect(renderCount).toBe(1);
816-
817-
renderCount=0;
818-
renderer.update(<Factory/>);
819-
expect(renderCount).toBe(1);
820-
renderCount=0;
821-
renderer.update(<Factory/>);
822-
expect(renderCount).toBe(1);
823-
renderCount=0;
824-
renderer.update(
825-
<StrictMode>
826-
<Factory/>
827-
</StrictMode>,
828-
);
829-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Treated like a class
830-
renderCount=0;
831-
renderer.update(
832-
<StrictMode>
833-
<Factory/>
834-
</StrictMode>,
835-
);
836-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Treated like a class
837-
838-
renderCount=0;
839-
renderer.update(<HasHooks/>);
840-
expect(renderCount).toBe(1);
841-
renderCount=0;
842-
renderer.update(<HasHooks/>);
843-
expect(renderCount).toBe(1);
844-
renderCount=0;
845-
renderer.update(
846-
<StrictMode>
847-
<HasHooks/>
848-
</StrictMode>,
849-
);
850-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
851-
renderCount=0;
852-
renderer.update(
853-
<StrictMode>
854-
<HasHooks/>
855-
</StrictMode>,
856-
);
857-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
858-
859-
renderCount=0;
860-
renderer.update(<FwdRefHasHooks/>);
861-
expect(renderCount).toBe(1);
862-
renderCount=0;
863-
renderer.update(<FwdRefHasHooks/>);
864-
expect(renderCount).toBe(1);
865-
renderCount=0;
866-
renderer.update(
867-
<StrictMode>
868-
<FwdRefHasHooks/>
869-
</StrictMode>,
870-
);
871-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
872-
renderCount=0;
873-
renderer.update(
874-
<StrictMode>
875-
<FwdRefHasHooks/>
876-
</StrictMode>,
877-
);
878-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
879-
880-
renderCount=0;
881-
renderer.update(<MemoHasHooksarg={1}/>);
882-
expect(renderCount).toBe(1);
883-
renderCount=0;
884-
renderer.update(<MemoHasHooksarg={2}/>);
885-
expect(renderCount).toBe(1);
886-
renderCount=0;
887-
renderer.update(
888-
<StrictMode>
889-
<MemoHasHooksarg={1}/>
890-
</StrictMode>,
891-
);
892-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
893-
renderCount=0;
894-
renderer.update(
895-
<StrictMode>
896-
<MemoHasHooksarg={2}/>
897-
</StrictMode>,
898-
);
899-
expect(renderCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
900-
});
901-
902-
it('double-invokes useMemo in DEV StrictMode despite []',()=>{
903-
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode=true;
904-
const{useMemo, StrictMode}=React;
905-
906-
letuseMemoCount=0;
907-
functionBadUseMemo(){
908-
useMemo(()=>{
909-
useMemoCount++;
910-
},[]);
911-
return<div/>;
912-
}
913-
914-
useMemoCount=0;
915-
ReactTestRenderer.create(
916-
<StrictMode>
917-
<BadUseMemo/>
918-
</StrictMode>,
919-
);
920-
expect(useMemoCount).toBe(__DEV__ ? 2 : 1);// Has Hooks
921-
});
922702
});

0 commit comments

Comments
 (0)