{"commit":{"subject":"Only call Profiler onRender when a descendant had work (#17223)","authoredAt":"2019-10-30T11:08:42-07:00","revision":"9a35adc96d6ff99de779aee52bb78d3c24f86c1d","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","shortRevision":"9a35adc96d"},"body":"","parents":["8eee0eb01ce3ead0f51ade75fdcf062a748d57a7"],"files":[{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactProfiler-test.internal.js"}],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 25cd68b0ea..cc51116413 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -2893,7 +2893,12 @@ function beginWork(\n }\n case Profiler:\n if (enableProfilerTimer) {\n- workInProgress.effectTag |= Update;\n+ \/\/ Profiler should only call onRender when one of its descendants actually rendered.\n+ const hasChildWork =\n+ workInProgress.childExpirationTime >= renderExpirationTime;\n+ if (hasChildWork) {\n+ workInProgress.effectTag |= Update;\n+ }\n }\n break;\n case SuspenseComponent: {\ndiff --git a\/packages\/react\/src\/__tests__\/ReactProfiler-test.internal.js b\/packages\/react\/src\/__tests__\/ReactProfiler-test.internal.js\nindex db64f1f86e..150573b495 100644\n--- a\/packages\/react\/src\/__tests__\/ReactProfiler-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactProfiler-test.internal.js\n@@ -295,6 +295,79 @@ describe('Profiler', () => {\n );\n });\n \n+ it('does not report work done on a sibling', () => {\n+ const callback = jest.fn();\n+\n+ const DoesNotUpdate = React.memo(function DoesNotUpdateInner() {\n+ Scheduler.unstable_advanceTime(10);\n+ return null;\n+ }, () => true);\n+\n+ let updateProfilerSibling;\n+\n+ function ProfilerSibling() {\n+ const [count, setCount] = React.useState(0);\n+ updateProfilerSibling = () => setCount(count + 1);\n+ return null;\n+ }\n+\n+ function App() {\n+ return (\n+ \n+ \n+ \n+ <\/React.Profiler>\n+ \n+ <\/React.Fragment>\n+ );\n+ }\n+\n+ const renderer = ReactTestRenderer.create();\n+\n+ expect(callback).toHaveBeenCalledTimes(1);\n+\n+ let call = callback.mock.calls[0];\n+\n+ expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);\n+ expect(call[0]).toBe('test');\n+ expect(call[1]).toBe('mount');\n+ expect(call[2]).toBe(10); \/\/ actual time\n+ expect(call[3]).toBe(10); \/\/ base time\n+ expect(call[4]).toBe(0); \/\/ start time\n+ expect(call[5]).toBe(10); \/\/ commit time\n+ expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); \/\/ interaction events\n+\n+ callback.mockReset();\n+\n+ Scheduler.unstable_advanceTime(20); \/\/ 10 -> 30\n+\n+ \/\/ Updating a parent should report a re-render,\n+ \/\/ since React technically did a little bit of work between the Profiler and the bailed out subtree.\n+ renderer.update();\n+\n+ expect(callback).toHaveBeenCalledTimes(1);\n+\n+ call = callback.mock.calls[0];\n+\n+ expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);\n+ expect(call[0]).toBe('test');\n+ expect(call[1]).toBe('update');\n+ expect(call[2]).toBe(0); \/\/ actual time\n+ expect(call[3]).toBe(10); \/\/ base time\n+ expect(call[4]).toBe(30); \/\/ start time\n+ expect(call[5]).toBe(30); \/\/ commit time\n+ expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); \/\/ interaction events\n+\n+ callback.mockReset();\n+\n+ Scheduler.unstable_advanceTime(20); \/\/ 30 -> 50\n+\n+ \/\/ Updating a sibling should not report a re-render.\n+ ReactTestRenderer.act(updateProfilerSibling);\n+\n+ expect(callback).not.toHaveBeenCalled();\n+ });\n+\n it('logs render times for both mount and update', () => {\n const callback = jest.fn();\n \n@@ -372,7 +445,7 @@ describe('Profiler', () => {\n Scheduler.unstable_advanceTime(5); \/\/ 0 -> 5\n \n ReactTestRenderer.create(\n- <>\n+ \n \n \n \n@@ -380,7 +453,7 @@ describe('Profiler', () => {\n <\/React.Profiler>\n <\/AdvanceTime>\n <\/React.Profiler>\n- <\/>,\n+ <\/React.Fragment>,\n );\n \n expect(callback).toHaveBeenCalledTimes(2);\n@@ -407,14 +480,14 @@ describe('Profiler', () => {\n Scheduler.unstable_advanceTime(5); \/\/ 0 -> 5\n \n ReactTestRenderer.create(\n- <>\n+ \n \n \n <\/React.Profiler>\n \n \n <\/React.Profiler>\n- <\/>,\n+ <\/React.Fragment>,\n );\n \n expect(callback).toHaveBeenCalledTimes(2);\n@@ -440,13 +513,13 @@ describe('Profiler', () => {\n Scheduler.unstable_advanceTime(5); \/\/ 0 -> 5\n \n ReactTestRenderer.create(\n- <>\n+ \n \n \n \n <\/React.Profiler>\n \n- <\/>,\n+ <\/React.Fragment>,\n );\n \n expect(callback).toHaveBeenCalledTimes(1);\n@@ -471,28 +544,18 @@ describe('Profiler', () => {\n }\n }\n \n- class Pure extends React.PureComponent {\n- render() {\n- return this.props.children;\n- }\n- }\n-\n const renderer = ReactTestRenderer.create(\n \n \n- \n- \n- \n-

\n- <\/React.Profiler>\n- <\/Pure>\n+ \n+

\n <\/React.Profiler>\n <\/Updater>\n <\/React.Profiler>,\n );\n \n \/\/ All profile callbacks are called for initial render\n- expect(callback).toHaveBeenCalledTimes(3);\n+ expect(callback).toHaveBeenCalledTimes(2);\n \n callback.mockReset();\n \n@@ -502,11 +565,11 @@ describe('Profiler', () => {\n });\n });\n \n- \/\/ Only call profile updates for paths that have re-rendered\n- \/\/ Since \"inner\" is beneath a pure component, it isn't called\n- expect(callback).toHaveBeenCalledTimes(2);\n- expect(callback.mock.calls[0][0]).toBe('middle');\n- expect(callback.mock.calls[1][0]).toBe('outer');\n+ \/\/ Only call onRender for paths that have re-rendered.\n+ \/\/ Since the Updater's props didn't change,\n+ \/\/ React does not re-render its children.\n+ expect(callback).toHaveBeenCalledTimes(1);\n+ expect(callback.mock.calls[0][0]).toBe('outer');\n });\n \n it('decreases actual time but not base time when sCU prevents an update', () => {\n@@ -1455,11 +1518,11 @@ describe('Profiler', () => {\n render() {\n instance = this;\n return (\n- <>\n+ \n \n {this.state.count}\n \n- <\/>\n+ <\/React.Fragment>\n );\n }\n }\n"}

dillon1000/react

Files changed