@samitouri / QOS-React / commits / 3fbebb2a0b

Revert "Double-render function components with Hooks in DEV in StrictMode" (#14652)

* Revert "Revert "Disallow reading context during useMemo etc" (#14651)" This reverts commit 5fce6488ce1dc97e31515a47ff409d32ab722d65. * Revert "Add test coverage for readContext() on the server (#14649)" This reverts commit fe2ecd276e9b9e57a49ddf2d86ff01677b69b493. * Revert "Warn about incorrect use of useImperativeHandle() (#14647)" This reverts commit 8f45a7fdc469c6d88ca5ca105095b03dd4e862e1. * Revert "Disallow reading context during useMemo etc (#14648)" This reverts commit 1fcbd22431d97e404c1f684744dc543b6c22b076. * Revert "Warn about refs on lazy function components (#14645)" This reverts commit 2a084f51a94df30e3bffd42bf3a04ce3da231512. * Revert "Fix typo (#14560)" This reverts commit b5a3df6e8894ebf2334179e445b0803f6819aa9f. * Revert "fix typo (#14316)" This reverts commit 9c146e675174a523f90f630c87f62f55812bacea. * Revert "Mention forwardRef() in <Fn ref={...} /> errors and warnings (#14644)" This reverts commit baa6d40fc856c65e1d74ddf4fa038d7a65a787ed. * Revert "Double-render function components with Hooks in DEV in StrictMode (#14643)" This reverts commit a1414e8949915c006bba411fa2949b304dd044ae.

Dan Abramov committed Jan 21, 2019 at 20:34 UTC 3fbebb2a0b3b806f428c4154700af8e75e561895
2 files changed -273
packages/react-reconciler/src/ReactFiberBeginWork.js
-53
@@ -250,23 +250,6 @@ function updateForwardRef(
250 ref,
251 renderExpirationTime,
252 );
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 - }
253 setCurrentPhase(null);
254 } else {
255 nextChildren = renderWithHooks(
@@ -560,23 +543,6 @@ function updateFunctionComponent(
543 context,
544 renderExpirationTime,
545 );
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 - }
546 setCurrentPhase(null);
547 } else {
548 nextChildren = renderWithHooks(
@@ -1244,25 +1210,6 @@ function mountIndeterminateComponent(
1210 } else {
1211 // Proceed under the assumption that this is a function component
1212 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 - }
1213 reconcileChildren(null, workInProgress, value, renderExpirationTime);
1214 if (__DEV__) {
1215 validateFunctionComponentInDev(workInProgress, Component);
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
-220
@@ -699,224 +699,4 @@ describe('ReactHooks', () => {
699 'Hooks can only be called inside the body of a function component',
700 );
701 });
702 -
703 - it('double-invokes components with Hooks in Strict Mode', () => {
704 - ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = true;
705 -
706 - const {useState, StrictMode} = React;
707 - let renderCount = 0;
708 -
709 - function NoHooks() {
710 - renderCount++;
711 - return <div />;
712 - }
713 -
714 - function HasHooks() {
715 - useState(0);
716 - renderCount++;
717 - return <div />;
718 - }
719 -
720 - const FwdRef = React.forwardRef((props, ref) => {
721 - renderCount++;
722 - return <div />;
723 - });
724 -
725 - const FwdRefHasHooks = React.forwardRef((props, ref) => {
726 - useState(0);
727 - renderCount++;
728 - return <div />;
729 - });
730 -
731 - const Memo = React.memo(props => {
732 - renderCount++;
733 - return <div />;
734 - });
735 -
736 - const MemoHasHooks = React.memo(props => {
737 - useState(0);
738 - renderCount++;
739 - return <div />;
740 - });
741 -
742 - function Factory() {
743 - return {
744 - state: {},
745 - render() {
746 - renderCount++;
747 - return <div />;
748 - },
749 - };
750 - }
751 -
752 - let renderer = 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(<Memo arg={1} />);
798 - expect(renderCount).toBe(1);
799 - renderCount = 0;
800 - renderer.update(<Memo arg={2} />);
801 - expect(renderCount).toBe(1);
802 - renderCount = 0;
803 - renderer.update(
804 - <StrictMode>
805 - <Memo arg={1} />
806 - </StrictMode>,
807 - );
808 - expect(renderCount).toBe(1);
809 - renderCount = 0;
810 - renderer.update(
811 - <StrictMode>
812 - <Memo arg={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(<MemoHasHooks arg={1} />);
882 - expect(renderCount).toBe(1);
883 - renderCount = 0;
884 - renderer.update(<MemoHasHooks arg={2} />);
885 - expect(renderCount).toBe(1);
886 - renderCount = 0;
887 - renderer.update(
888 - <StrictMode>
889 - <MemoHasHooks arg={1} />
890 - </StrictMode>,
891 - );
892 - expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
893 - renderCount = 0;
894 - renderer.update(
895 - <StrictMode>
896 - <MemoHasHooks arg={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 - let useMemoCount = 0;
907 - function BadUseMemo() {
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 - });
702 });