[{"name":"website/src/routes","type":"folder","parent":"website/src","displayName":"routes"},{"name":"src/__tests__","type":"folder","parent":"src","displayName":"__tests__"},{"name":"src","type":"module","parent":null,"displayName":"src"},{"name":"website/config","type":"folder","parent":"website","displayName":"config"},{"name":"website","type":"module","parent":null,"displayName":"website"},{"name":"website/sandboxes/memoized-list-items","type":"folder","parent":"website","displayName":"sandboxes/memoized-list-items"},{"name":"website/src","type":"folder","parent":"website","displayName":"src"},{"name":"website/src/code","type":"folder","parent":"website/src","displayName":"code"},{"name":"website/src/components","type":"folder","parent":"website/src","displayName":"components"},{"name":"website/src/routes/api","type":"folder","parent":"website/src/routes","displayName":"api"},{"name":"website/src/routes/examples","type":"folder","parent":"website/src/routes","displayName":"examples"},{"name":"website/webpack","type":"folder","parent":"website","displayName":"webpack"},{"name":"package.json","status":"modified","patch":"@@ -95,10 +95,10 @@\n \"gh-pages\": \"^1.1.0\",\n \"lint-staged\": \"^7.0.5\",\n \"prettier\": \"^1.12.1\",\n- \"react\": \"^16.5.1\",\n- \"react-dom\": \"^16.5.1\",\n+ \"react\": \"^16.7.0\",\n+ \"react-dom\": \"^16.7.0\",\n \"react-scripts\": \"^1.1.1\",\n- \"react-test-renderer\": \"^16.4.0\",\n+ \"react-test-renderer\": \"^16.7.0\",\n \"rollup\": \"^0.65.0\",\n \"rollup-plugin-babel\": \"^4.0.2\",\n \"rollup-plugin-commonjs\": \"^8.2.1\",","type":"file","sha":"1373982f053569a970ea9e5b7074f340c05a878e","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519","dependencies":[],"parent":null,"displayName":"package.json"},{"name":"src/__tests__/areEqual.js","status":"added","patch":"@@ -0,0 +1,32 @@\n+import React, { memo } from 'react';\n+import ReactTestRenderer from 'react-test-renderer';\n+import { areEqual } from '..';\n+\n+describe('areEqual', () => {\n+ let Component, MemoizedComponent;\n+\n+ beforeEach(() => {\n+ Component = jest.fn(() => null);\n+ MemoizedComponent = memo(Component, areEqual);\n+ });\n+\n+ it('should not re-render when the style prop changes', () => {\n+ const renderer = ReactTestRenderer.create(\n+ \n+ );\n+ expect(Component).toHaveBeenCalledTimes(1);\n+\n+ renderer.update();\n+ expect(Component).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('should re-render when other props change', () => {\n+ const renderer = ReactTestRenderer.create(\n+ \n+ );\n+ expect(Component).toHaveBeenCalledTimes(1);\n+\n+ renderer.update();\n+ expect(Component).toHaveBeenCalledTimes(2);\n+ });\n+});","type":"file","sha":"6551514af81954bac4124741d6357c8d4e94d1bd","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-a1d366387535bc76432ef86fb5813e0e7ec6d5a30ce186c4bb5ab39b3ba7bfe1","dependencies":[{"status":"added","name":"src/index.js"}],"parent":"src/__tests__","displayName":"areEqual.js"},{"name":"src/__tests__/shouldComponentUpdate.js","status":"added","patch":"@@ -0,0 +1,36 @@\n+import React, { Component } from 'react';\n+import ReactTestRenderer from 'react-test-renderer';\n+import { shouldComponentUpdate } from '..';\n+\n+describe('shouldComponentUpdate', () => {\n+ let ClassComponent, render;\n+\n+ beforeEach(() => {\n+ render = jest.fn(() => null);\n+\n+ ClassComponent = class extends Component {\n+ shouldComponentUpdate = shouldComponentUpdate.bind(this);\n+ render = render;\n+ };\n+ });\n+\n+ it('should not re-render when the style prop changes', () => {\n+ const renderer = ReactTestRenderer.create(\n+ \n+ );\n+ expect(render).toHaveBeenCalledTimes(1);\n+\n+ renderer.update();\n+ expect(render).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('should re-render when other props change', () => {\n+ const renderer = ReactTestRenderer.create(\n+ \n+ );\n+ expect(render).toHaveBeenCalledTimes(1);\n+\n+ renderer.update();\n+ expect(render).toHaveBeenCalledTimes(2);\n+ });\n+});","type":"file","sha":"8b1f2ba9b61bacb3e8cfb1b2647d603f2175c0f7","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-fa1c9fd2dd9a2ba99b2097a3947ef929eaf385ff9546b532c93ae353dad576ad","dependencies":[{"status":"added","name":"src/index.js"}],"parent":"src/__tests__","displayName":"shouldComponentUpdate.js"},{"name":"src/areEqual.js","status":"added","patch":"@@ -0,0 +1,18 @@\n+// @flow\n+\n+import shallowDiffers from './shallowDiffers';\n+\n+// Custom comparison function for React.memo().\n+// It knows to compare individual style props and ignore the wrapper object.\n+// See https://reactjs.org/docs/react-api.html#reactmemo\n+export default function areEqual(\n+ prevProps: Object,\n+ nextProps: Object\n+): boolean {\n+ const { style: prevStyle, ...prevRest } = prevProps;\n+ const { style: nextStyle, ...nextRest } = nextProps;\n+\n+ return (\n+ !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest)\n+ );\n+}","type":"file","sha":"072951ef677533f845794617fb1555bf8d461f67","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-5ad9a7dca6761baf91a53adf791109dcba2348c4f55c64ad533a993f8bd28a93","dependencies":[{"status":"added","name":"src/shallowDiffers.js"}],"parent":"src","displayName":"areEqual.js"},{"name":"src/createListComponent.js","status":"modified","patch":"@@ -390,24 +390,15 @@ export default function createListComponent({\n if (itemStyleCache.hasOwnProperty(index)) {\n style = itemStyleCache[index];\n } else {\n+ const offset = getItemOffset(this.props, index, this._instanceProps);\n+ const size = getItemSize(this.props, index, this._instanceProps);\n+\n itemStyleCache[index] = style = {\n position: 'absolute',\n- left:\n- direction === 'horizontal'\n- ? getItemOffset(this.props, index, this._instanceProps)\n- : 0,\n- top:\n- direction === 'vertical'\n- ? getItemOffset(this.props, index, this._instanceProps)\n- : 0,\n- height:\n- direction === 'vertical'\n- ? getItemSize(this.props, index, this._instanceProps)\n- : '100%',\n- width:\n- direction === 'horizontal'\n- ? getItemSize(this.props, index, this._instanceProps)\n- : '100%',\n+ left: direction === 'horizontal' ? offset : 0,\n+ top: direction === 'vertical' ? offset : 0,\n+ height: direction === 'vertical' ? size : '100%',\n+ width: direction === 'horizontal' ? size : '100%',\n };\n }\n ","type":"file","sha":"fcaab3f26f14e731cbcb486136892ba7594144e7","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-e47821c15aac746d0f12774ce9e1f8c39d13509eaeef40810173b6abdaef9bd9","dependencies":[],"parent":"src","displayName":"createListComponent.js"},{"name":"src/index.js","status":"modified","patch":"@@ -4,3 +4,6 @@ export { default as VariableSizeGrid } from './VariableSizeGrid';\n export { default as VariableSizeList } from './VariableSizeList';\n export { default as FixedSizeGrid } from './FixedSizeGrid';\n export { default as FixedSizeList } from './FixedSizeList';\n+\n+export { default as areEqual } from './areEqual';\n+export { default as shouldComponentUpdate } from './shouldComponentUpdate';","type":"file","sha":"dff39bf11968ed1cbe530e66b24a6b98bb0a6fa0","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-bfe9874d239014961b1ae4e89875a6155667db834a410aaaa2ebe3cf89820556","dependencies":[{"status":"added","name":"src/areEqual.js"},{"status":"added","name":"src/shouldComponentUpdate.js"}],"parent":"src","displayName":"index.js"},{"name":"src/shallowDiffers.js","status":"added","patch":"@@ -0,0 +1,17 @@\n+// @flow\n+\n+// Pulled from react-compat\n+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349\n+export default function shallowDiffers(prev: Object, next: Object): boolean {\n+ for (let attribute in prev) {\n+ if (!(attribute in next)) {\n+ return true;\n+ }\n+ }\n+ for (let attribute in next) {\n+ if (prev[attribute] !== next[attribute]) {\n+ return true;\n+ }\n+ }\n+ return false;\n+}","type":"file","sha":"c2395f6378f27a5aeb42f04931b278e9d030b517","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-4a3349d1ecd95fc0ca85c814e07416b309c9974c41479a5b21b9b3fa514be60c","dependencies":[],"parent":"src","displayName":"shallowDiffers.js"},{"name":"src/shouldComponentUpdate.js","status":"added","patch":"@@ -0,0 +1,16 @@\n+// @flow\n+\n+import areEqual from './areEqual';\n+import shallowDiffers from './shallowDiffers';\n+\n+// Custom shouldComponentUpdate for class components.\n+// It knows to compare individual style props and ignore the wrapper object.\n+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate\n+export default function shouldComponentUpdate(\n+ nextProps: Object,\n+ nextState: Object\n+): boolean {\n+ return (\n+ !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)\n+ );\n+}","type":"file","sha":"6b891bd4d2e50611fcb982f874b0343adde9d664","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-9819bc41d4c5ce95382f3790aaa4e386016b9491b22ee21db29e9e184eaa8262","dependencies":[{"status":"added","name":"src/areEqual.js"},{"status":"added","name":"src/shallowDiffers.js"}],"parent":"src","displayName":"shouldComponentUpdate.js"},{"name":"src/test.js.flow","status":"modified","patch":"@@ -21,6 +21,17 @@ const assertCustomType = (value: ItemData) => {};\n \n /* FixedSizeList */\n \n+{\n+ const Item = ({ index, style }) => {\n+ (index: number);\n+ (style: Object);\n+ return null;\n+ };\n+ \n+ {Item}\n+ ;\n+}\n+\n {\n const Item = ({ data }) => {\n assertNumber(data);\n@@ -72,6 +83,7 @@ const assertCustomType = (value: ItemData) => {};\n assertVoid(data);\n // $FlowFixMe itemData is undefined by default\n assertEmpty(data);\n+\n return null;\n };\n const itemKey = (index, data) => {\n@@ -181,6 +193,25 @@ const assertCustomType = (value: ItemData) => {};\n \n /* FixedSizeGrid */\n \n+{\n+ const Item = ({ columnIndex, rowIndex, style }) => {\n+ (columnIndex: number);\n+ (rowIndex: number);\n+ (style: Object);\n+ return null;\n+ };\n+ \n+ {Item}\n+ ;\n+}\n+\n {\n const Item = ({ data }) => {\n assertNumber(data);","type":"file","sha":"fd17273747ddf2c63e9ccf5d403564e3022125b5","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-2f0aab84bff26a962c725f1f13a91758c0c341d861ac940c63cf605a4440d72e","dependencies":[],"parent":"src","displayName":"test.js.flow"},{"name":"website/config/webpack.config.prod.js","status":"modified","patch":"@@ -154,7 +154,7 @@ module.exports = {\n \n // Load profiling-capable builds:\n 'react-dom': 'react-dom/cjs/react-dom.profiling.min.js',\n- 'schedule/tracking': 'schedule/cjs/schedule-tracking.profiling.min.js',\n+ 'scheduler/tracing': 'scheduler/cjs/scheduler-tracing.profiling.min.js',\n },\n plugins: [\n // Prevents users from importing files from outside of src/ (or node_modules/).","type":"file","sha":"e529fde969ab5219ab1000120adb4309562f75dc","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-fd517e94e4dfd6382dcc222dff71fe3e8e775ecdc2826aa8656f563ce77a4eda","dependencies":[],"parent":"website/config","displayName":"webpack.config.prod.js"},{"name":"website/package.json","status":"modified","patch":"@@ -48,10 +48,10 @@\n \"promise\": \"8.0.1\",\n \"prop-types\": \"^15.6.1\",\n \"raf\": \"3.4.0\",\n- \"react\": \"^16.5.1\",\n+ \"react\": \"^16.7.0\",\n \"react-codemirror2\": \"^5.0.1\",\n \"react-dev-utils\": \"^6.0.0-next.66cc7a90\",\n- \"react-dom\": \"^16.5.1\",\n+ \"react-dom\": \"^16.7.0\",\n \"react-router\": \"^4.2.0\",\n \"react-router-dom\": \"^4.2.2\",\n \"react-router-hash-link\": \"^1.2.0\",","type":"file","sha":"9c4f875fd308c89d9065f52e082e1de148cecfd0","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-fae242fbf77a8a9d52625664bc36ea12316586f8a716b41137d897a2b7e3df76","dependencies":[],"parent":"website","displayName":"package.json"},{"name":"website/sandboxes/memoized-list-items/index.js","status":"modified","patch":"@@ -1,7 +1,7 @@\n-import React, { PureComponent } from 'react';\n+import React, { PureComponent, memo } from 'react';\n import ReactDOM from 'react-dom';\n import memoize from 'memoize-one';\n-import { FixedSizeList as List } from 'react-window';\n+import { FixedSizeList as List, areEqual } from 'react-window';\n \n const generateItems = numItems =>\n Array(numItems)\n@@ -16,21 +16,17 @@ const generateItems = numItems =>\n // If list items are expensive to render,\n // Consider using PureComponent to avoid unnecessary re-renders.\n // https://reactjs.org/docs/react-api.html#reactpurecomponent\n-class Row extends PureComponent {\n- render() {\n- const { data, index, style } = this.props;\n-\n- // Data passed to List as \"itemData\" is available as props.data\n- const { items, toggleItemActive } = data;\n- const item = items[index];\n+const Row = memo(({ data, index, style }) => {\n+ // Data passed to List as \"itemData\" is available as props.data\n+ const { items, toggleItemActive } = data;\n+ const item = items[index];\n \n- return (\n-

toggleItemActive(index)} style={style}>\n- {item.label} is {item.isActive ? 'active' : 'inactive'}\n-

\n- );\n- }\n-}\n+ return (\n+

toggleItemActive(index)} style={style}>\n+ {item.label} is {item.isActive ? 'active' : 'inactive'}\n+

\n+ );\n+}, areEqual);\n \n // This helper function memoizes incoming props,\n // To avoid causing unnecessary re-renders pure Row components.","type":"file","sha":"782ebe9994b9f673d529391785b56ca020804bc4","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-54128c2ce2164baa35f2bd28a33d564aa08786545b166b3cb4a9bc209f44d028","dependencies":[],"parent":"website/sandboxes/memoized-list-items","displayName":"index.js"},{"name":"website/sandboxes/memoized-list-items/package.json","status":"modified","patch":"@@ -3,8 +3,8 @@\n \"main\": \"src/index.js\",\n \"dependencies\": {\n \"memoize-one\": \"^4\",\n- \"react\": \"^16\",\n- \"react-dom\": \"^16\",\n+ \"react\": \"^16.6\",\n+ \"react-dom\": \"^16.6\",\n \"react-window\": \"^1\"\n }\n }","type":"file","sha":"1d2a045c54f7fc8470c97a8ecafc15ca33c568bd","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-49dc43849055c73018d63d0dc73ad5fa6cb28845a1f35a5837cdaecfd965350c","dependencies":[],"parent":"website/sandboxes/memoized-list-items","displayName":"package.json"},{"name":"website/src/App.js","status":"modified","patch":"@@ -4,6 +4,8 @@ import { Nav } from './components/Nav';\n import { SubMenu } from './components/SubMenu';\n \n // Routes\n+import areEqualApi from './routes/api/areEqual';\n+import shouldComponentUpdateApi from './routes/api/shouldComponentUpdate';\n import VariableSizeGridApi from './routes/api/VariableSizeGrid';\n import VariableSizeGridExample from './routes/examples/VariableSizeGrid';\n import VariableSizeListApi from './routes/api/VariableSizeList';\n@@ -28,7 +30,16 @@ export default function App() {\n items={EXAMPLE_ROUTES}\n title=\"Examples\"\n />\n- \n+ \n+ \n \n

\n }\n />\n \n- {EXAMPLE_ROUTES.map(({ component, path }) => (\n- \n- ))}\n-\n- {API_ROUTES.map(({ component, path }) => (\n- \n- ))}\n+ {[EXAMPLE_ROUTES, COMPONENTS_ROUTES, METHODS_ROUTES].map(routes =>\n+ routes.map(({ component, path }) => (\n+ \n+ ))\n+ )}\n

\n \n \n@@ -88,7 +97,7 @@ const EXAMPLE_ROUTES = [\n },\n ];\n \n-const API_ROUTES = [\n+const COMPONENTS_ROUTES = [\n {\n path: '/api/FixedSizeList',\n title: 'FixedSizeList',\n@@ -110,3 +119,16 @@ const API_ROUTES = [\n component: VariableSizeGridApi,\n },\n ];\n+\n+const METHODS_ROUTES = [\n+ {\n+ path: '/api/areEqual',\n+ title: 'areEqual',\n+ component: areEqualApi,\n+ },\n+ {\n+ path: '/api/shouldComponentUpdate',\n+ title: 'shouldComponentUpdate',\n+ component: shouldComponentUpdateApi,\n+ },\n+];","type":"file","sha":"d24571cc01afc2104c7723869dde3bf2ab5cb3e1","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-c7a662981dd004a6416bc35d67f41255c03742fd286e22e9169e67266b1a6096","dependencies":[{"status":"added","name":"website/src/routes/api/areEqual.js"},{"status":"added","name":"website/src/routes/api/shouldComponentUpdate.js"},{"status":"no_change","name":"website/src/routes/examples/ScrollToItem.js"},{"status":"no_change","name":"website/src/routes/examples/MemoizedListItemsExample.js"}],"parent":"website/src","displayName":"App.js"},{"name":"website/src/code/MemoizedListItems.js","status":"modified","patch":"@@ -1,28 +1,26 @@\n-import React, { PureComponent } from 'react';\n+import React, { memo } from 'react';\n import memoize from 'memoize-one';\n-import { FixedSizeList as List } from 'react-window';\n+import { FixedSizeList as List, areEqual } from 'react-window';\n \n // If list items are expensive to render,\n-// Consider using PureComponent to avoid unnecessary re-renders.\n+// Consider using React.memo or shouldComponentUpdate to avoid unnecessary re-renders.\n+// https://reactjs.org/docs/react-api.html#reactmemo\n // https://reactjs.org/docs/react-api.html#reactpurecomponent\n-class Row extends PureComponent {\n- render() {\n- const { data, index, style } = this.props;\n+const Row = memo(({ data, index, style }) => {\n \n- // Data passed to List as \"itemData\" is available as props.data\n- const { items, toggleItemActive } = data;\n- const item = items[index];\n+ // Data passed to List as \"itemData\" is available as props.data\n+ const { items, toggleItemActive } = data;\n+ const item = items[index];\n \n- return (\n- toggleItemActive(index)}\n- style={style}\n- >\n- {item.label} is {item.isActive ? 'active' : 'inactive'}\n- \n- );\n- }\n-}\n+ return (\n+ toggleItemActive(index)}\n+ style={style}\n+ >\n+ {item.label} is {item.isActive ? 'active' : 'inactive'}\n+ \n+ );\n+}, areEqual);\n \n // This helper function memoizes incoming props,\n // To avoid causing unnecessary re-renders pure Row components.","type":"file","sha":"74de7299c3200f57e658b232c1b3e63c2800e31e","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-40c6ada22dfc007b1973ffb0820116e8e1be3d647dacda711c0cfd0ff12b2b84","dependencies":[],"parent":"website/src/code","displayName":"MemoizedListItems.js"},{"name":"website/src/code/areEqual.js","status":"added","patch":"@@ -0,0 +1,15 @@\n+import React, { memo } from \"react\";\n+\n+// Step 1: Import areEqual from react-window\n+import { areEqual } from \"react-window\";\n+\n+const Row = memo(\n+ props => {\n+ const { index, style } = props;\n+\n+ return

Row {index}

;\n+ },\n+\n+ // Step 2: Pass it as the second argument to React.memo()\n+ areEqual\n+);","type":"file","sha":"a90ae93dd47a37689a09b3caec15f77e52931796","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-9e926eb06f86debe29c8e05362836dc87a8924a25220d68b54cac92d30c0b98a","dependencies":[],"parent":"website/src/code","displayName":"areEqual.js"},{"name":"website/src/code/shouldComponentUpdate.js","status":"added","patch":"@@ -0,0 +1,15 @@\n+import React, { Component } from \"react\";\n+\n+// Step 1: Import shouldComponentUpdate from react-window\n+import { shouldComponentUpdate } from \"react-window\";\n+\n+class Row extends Component {\n+ // Step 2: Bind the sCU method to the component instance\n+ shouldComponentUpdate = shouldComponentUpdate.bind(this);\n+\n+ render() {\n+ const { index, style } = this.props;\n+\n+ return

Row {index}

;\n+ }\n+}","type":"file","sha":"cc5cdfd73fae89a93a90bf49ef51a8760f5256cb","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-7bba149376167b711bacc6a90add1f801a373e17af8e56dfc90d5ff3cf40ed38","dependencies":[],"parent":"website/src/code","displayName":"shouldComponentUpdate.js"},{"name":"website/src/components/CodeBlock.css","status":"modified","patch":"@@ -5,3 +5,12 @@\n .CodeMirror-scroll {\n height: auto;\n }\n+\n+.CodeMirror .CodeMirror-line-highlight {\n+ background-color: #162228;\n+}\n+\n+/* Material theme overrides */\n+.cm-s-material .cm-comment {\n+ color: #647e8a;\n+}","type":"file","sha":"238524a431f98c8448114707b601a810e9ab2dff","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-fcb48d108e0b24b8783660dd6c26d03e1feb530a8997423d8be1d13c7571e330","dependencies":[],"parent":"website/src/components","displayName":"CodeBlock.css"},{"name":"website/src/components/Method.js","status":"added","patch":"@@ -0,0 +1,10 @@\n+import React from 'react';\n+\n+import styles from './Method.module.css';\n+\n+export default ({ children, name }) => (\n+

\n+

{name}

\n+

{children}

\n+

\n+);","type":"file","sha":"f0de6aea86ae6e95da8a26bf6c8933e04fcfe694","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-3c80011ce2b60fbc5dbe2b48aad4888e389647365a5a07c6b71830cd47878286","dependencies":[],"metadata":[{"name":"website/src/components/Method.module.css","status":"added","type":"styles","patch":"@@ -0,0 +1,10 @@\n+.MethodApi {\n+ width: 100%;\n+ padding: 2rem 2rem 0;\n+ background-color: #fff;\n+ box-sizing: border-box;\n+}\n+\n+.MethodApiSummary {\n+ margin-bottom: 1rem;\n+}","fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-a0b99388ae5542b46058311b468f21a1e03bac2fc8636db9fc1203708b66aa79"}],"parent":"website/src/components","displayName":"Method.js"},{"name":"website/src/routes/api/areEqual.js","status":"added","patch":"@@ -0,0 +1,35 @@\n+import React from 'react';\n+import { NavLink as Link } from 'react-router-dom';\n+import CodeBlock from '../../components/CodeBlock';\n+import Method from '../../components/Method';\n+\n+import styles from './shared.module.css';\n+\n+import CODE from '../../code/areEqual.js';\n+\n+export default () => (\n+ \n+

\n+ Custom comparison function for{' '}\n+ \n+ React.memo\n+ . If your item renderer is a class component, use the{' '}\n+ \n+ shouldComponentUpdate\n+ {' '}\n+ method instead.\n+

\n+

\n+ This function knows to compare individual style props and\n+ ignore the wrapper object in order to avoid unnecessarily re-rendering\n+ when cached style objects are reset.\n+

\n+

\n+ \n+

\n+

\n+ This is an advanced performance optimization. It is not\n+ necessary in most cases.\n+

\n+ \n+);","type":"file","sha":"9f1409936d4bac9de9a7d2343dfe4d5d1c72779e","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-0bbb7882ee5d87bee9d41d72908406a3cd0ffa2193c1c8a936a40acca7e8c4ea","dependencies":[{"status":"added","name":"website/src/components/Method.js"},{"status":"added","name":"website/src/code/areEqual.js"}],"parent":"website/src/routes/api","displayName":"areEqual.js"},{"name":"website/src/routes/api/shouldComponentUpdate.js","status":"added","patch":"@@ -0,0 +1,37 @@\n+import React from 'react';\n+import { NavLink as Link } from 'react-router-dom';\n+import CodeBlock from '../../components/CodeBlock';\n+import Method from '../../components/Method';\n+\n+import styles from './shared.module.css';\n+\n+import CODE from '../../code/shouldComponentUpdate.js';\n+\n+export default () => (\n+ \n+

\n+ Custom{' '}\n+ \n+ shouldComponentUpdate\n+ {' '}\n+ implementation for class components. If your item renderer is a functional\n+ component, use the{' '}\n+ \n+ areEqual\n+ {' '}\n+ comparison method instead.\n+

\n+

\n+ This function knows to compare individual style props and\n+ ignore the wrapper object in order to avoid unnecessarily re-rendering\n+ when cached style objects are reset.\n+

\n+

\n+ \n+

\n+

\n+ This is an advanced performance optimization. It is not\n+ necessary in most cases.\n+

\n+ \n+);","type":"file","sha":"8efa51f196988bb3bf99c457b3f3b58c18a91d5a","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-e2df4c2f5fb6479e8f694d1dc42c2ff3ba195c3a60bc2d5d6e3a9df914bdee16","dependencies":[{"status":"added","name":"website/src/components/Method.js"},{"status":"added","name":"website/src/code/shouldComponentUpdate.js"}],"parent":"website/src/routes/api","displayName":"shouldComponentUpdate.js"},{"name":"website/src/routes/examples/MemoizedListItemsExample.js","status":"modified","patch":"@@ -1,6 +1,6 @@\n import memoize from 'memoize-one';\n-import React, { PureComponent } from 'react';\n-import { FixedSizeList } from 'react-window';\n+import React, { PureComponent, memo } from 'react';\n+import { FixedSizeList, areEqual } from 'react-window';\n import CodeBlock from '../../components/CodeBlock';\n import ProfiledExample from '../../components/ProfiledExample';\n \n@@ -18,34 +18,31 @@ const generateItems = numItems =>\n .substr(2),\n }));\n \n-class Row extends PureComponent {\n- render() {\n- const { data, index, style } = this.props;\n- const { items, toggleItemActive } = data;\n- const item = items[index];\n+const Row = memo(({ data, index, style }) => {\n+ const { items, toggleItemActive } = data;\n+ const item = items[index];\n \n- return (\n- toggleItemActive(index)}\n+ return (\n+ toggleItemActive(index)}\n+ style={{\n+ ...style,\n+ userSelect: 'none',\n+ cursor: 'pointer',\n+ }}\n+ >\n+ {item.label} is \n+ \n- {item.label} is \n- \n- {item.isActive ? 'active' : 'inactive'}\n- \n- \n- );\n- }\n-}\n+ {item.isActive ? 'active' : 'inactive'}\n+ \n+ \n+ );\n+}, areEqual);\n \n export default class MemoizedListItemsExample extends PureComponent {\n state = {","type":"file","sha":"6eb60e0c1f7d8144c79ce55859091f1d843e91fe","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-2c8c6c3110c39cc32ba759a74939380d83b59e46e8a2f75deb1f1a006d015b02","dependencies":[{"status":"no_change","name":"website/src/code/MemoizedListItems.js"}],"parent":"website/src/routes/examples","displayName":"MemoizedListItemsExample.js"},{"name":"website/src/routes/examples/ScrollToItem.js","status":"modified","patch":"@@ -1,6 +1,6 @@\n import React, { PureComponent } from 'react';\n import { VariableSizeGrid, VariableSizeList } from 'react-window';\n-import { unstable_track as track } from 'schedule/tracking';\n+import { unstable_trace as trace } from 'scheduler/tracing';\n \n import CodeBlock from '../../components/CodeBlock';\n import ProfiledExample from '../../components/ProfiledExample';\n@@ -146,11 +146,11 @@ export default class ScrollToItem extends PureComponent {\n }\n \n scrollToRow200Auto = () =>\n- track('scroll to row 200', performance.now(), () =>\n+ trace('scroll to row 200', performance.now(), () =>\n this.listRef.current.scrollToItem(200)\n );\n scrollToRow300Center = () =>\n- track('scroll to row 300', performance.now(), () =>\n+ trace('scroll to row 300', performance.now(), () =>\n this.listRef.current.scrollToItem(300, 'center')\n );\n ","type":"file","sha":"a2132f1f4b0658fd07e89e2fd7837a421d6fae45","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-d376dddc2713ee5698399a9d37ceca025ee48d0c0a3b9c8a4dcae96118a5f050","dependencies":[],"parent":"website/src/routes/examples","displayName":"ScrollToItem.js"},{"name":"website/webpack/codemirror-loader.js","status":"modified","patch":"@@ -40,7 +40,15 @@ module.exports = function loader(content) {\n if (!line) {\n line = ' '; // Don't collapse empty lines\n }\n- return `

${line}

\\n`;\n+\n+ let className = 'CodeMirror-line';\n+\n+ if (line.includes('// !!')) {\n+ line = line.replace('// !!', '');\n+ className += ' CodeMirror-line-highlight';\n+ }\n+\n+ return `

${line}

\\n`;\n });\n \n return `module.exports = ${JSON.stringify(lines.join('\\n'))}`;","type":"file","sha":"bc97fec4f67d78cc27e17ec819c8df9e3ec339ed","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-8be66ac4574ad2b768cc6a469037aa1c2eefe262b04446bd0786f01f87f064f2","dependencies":[],"parent":"website/webpack","displayName":"codemirror-loader.js"},{"name":"website/yarn.lock","status":"modified","patch":"@@ -7552,14 +7552,15 @@ react-dev-utils@6.0.0-next.66cc7a90, react-dev-utils@^6.0.0-next.66cc7a90:\n strip-ansi \"4.0.0\"\n text-table \"0.2.0\"\n \n-react-dom@^16.5.1:\n- version \"16.5.1\"\n- resolved \"https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.1.tgz#29d0c5a01ed3b6b4c14309aa91af6ec4eb4f292c\"\n+react-dom@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8\"\n+ integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==\n dependencies:\n loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n prop-types \"^15.6.2\"\n- schedule \"^0.4.0\"\n+ scheduler \"^0.12.0\"\n \n react-error-overlay@5.0.0-next.66cc7a90:\n version \"5.0.0-next.66cc7a90\"\n@@ -7653,14 +7654,15 @@ react-scripts@^2.0.0-next.66cc7a90:\n version \"0.0.0\"\n uid \"\"\n \n-react@^16.5.1:\n- version \"16.5.1\"\n- resolved \"https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372\"\n+react@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381\"\n+ integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==\n dependencies:\n loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n prop-types \"^15.6.2\"\n- schedule \"^0.4.0\"\n+ scheduler \"^0.12.0\"\n \n read-pkg-up@^1.0.1:\n version \"1.0.1\"\n@@ -8149,10 +8151,12 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:\n version \"1.2.4\"\n resolved \"https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9\"\n \n-schedule@^0.4.0:\n- version \"0.4.0\"\n- resolved \"https://registry.yarnpkg.com/schedule/-/schedule-0.4.0.tgz#fa20cfd0bfbf91c47d02272fd7096780d3170bbb\"\n+scheduler@^0.12.0:\n+ version \"0.12.0\"\n+ resolved \"https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b\"\n+ integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==\n dependencies:\n+ loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n \n schema-utils@^0.3.0:","type":"file","sha":"2435987d7c6798b0f95c2f016833682ff0bf7bdf","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-a4d4f2e0939888fa32e5e7eb7a17fc2a84aaabe8d5c867443da4351751158313","dependencies":[],"parent":"website","displayName":"yarn.lock"},{"name":"yarn.lock","status":"modified","patch":"@@ -6878,22 +6878,24 @@ react-dev-utils@^5.0.1:\n strip-ansi \"3.0.1\"\n text-table \"0.2.0\"\n \n-react-dom@^16.5.1:\n- version \"16.5.1\"\n- resolved \"https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.1.tgz#29d0c5a01ed3b6b4c14309aa91af6ec4eb4f292c\"\n+react-dom@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8\"\n+ integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==\n dependencies:\n loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n prop-types \"^15.6.2\"\n- schedule \"^0.4.0\"\n+ scheduler \"^0.12.0\"\n \n react-error-overlay@^4.0.0:\n version \"4.0.0\"\n resolved \"https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4\"\n \n-react-is@^16.4.0:\n- version \"16.4.0\"\n- resolved \"https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf\"\n+react-is@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa\"\n+ integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==\n \n react-scripts@^1.1.1:\n version \"1.1.4\"\n@@ -6940,23 +6942,25 @@ react-scripts@^1.1.1:\n optionalDependencies:\n fsevents \"^1.1.3\"\n \n-react-test-renderer@^16.4.0:\n- version \"16.4.0\"\n- resolved \"https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3\"\n+react-test-renderer@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c\"\n+ integrity sha512-tFbhSjknSQ6+ttzmuGdv+SjQfmvGcq3PFKyPItohwhhOBmRoTf1We3Mlt3rJtIn85mjPXOkKV+TaKK4irvk9Yg==\n dependencies:\n- fbjs \"^0.8.16\"\n object-assign \"^4.1.1\"\n- prop-types \"^15.6.0\"\n- react-is \"^16.4.0\"\n+ prop-types \"^15.6.2\"\n+ react-is \"^16.7.0\"\n+ scheduler \"^0.12.0\"\n \n-react@^16.5.1:\n- version \"16.5.1\"\n- resolved \"https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372\"\n+react@^16.7.0:\n+ version \"16.7.0\"\n+ resolved \"https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381\"\n+ integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==\n dependencies:\n loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n prop-types \"^15.6.2\"\n- schedule \"^0.4.0\"\n+ scheduler \"^0.12.0\"\n \n read-pkg-up@^1.0.1:\n version \"1.0.1\"\n@@ -7444,10 +7448,12 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:\n version \"1.2.4\"\n resolved \"https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9\"\n \n-schedule@^0.4.0:\n- version \"0.4.0\"\n- resolved \"https://registry.yarnpkg.com/schedule/-/schedule-0.4.0.tgz#fa20cfd0bfbf91c47d02272fd7096780d3170bbb\"\n+scheduler@^0.12.0:\n+ version \"0.12.0\"\n+ resolved \"https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b\"\n+ integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==\n dependencies:\n+ loose-envify \"^1.1.0\"\n object-assign \"^4.1.1\"\n \n schema-utils@^0.3.0:","type":"file","sha":"f81bc3cb6a73c33fd93037391deb4e5eaa407ef0","previousName":null,"fileChangeUrl":"https://github.com/bvaughn/react-window/pull/114/files#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2de","dependencies":[],"parent":null,"displayName":"yarn.lock"}]