Commit 5679da6

authored

Fix recursion with react elements (#883)

* Remove check for React.isValidElement * Remove _owner key from react elements * split test in to two

1 parent b6cbd90 commit 5679da6Copy full SHA for 5679da6

File tree

+55

-9

lines changed

+55

-9

lines changed

Lines changed: 9 additions & 9 deletions

Original file line number	Diff line number	Diff line change
`@@ -7,15 +7,18 @@ function safeSortObject(value: any, seen: WeakSet<any>): any {`
`7`	`7`	`return value;`
`8`	`8`	`}`
`9`	`9`
`10`		`- // return date, regexp and react element values as is`
`11`		`- if (`
`12`		`- value instanceof Date \|\|`
`13`		`- value instanceof RegExp \|\|`
`14`		`- React.isValidElement(value)`
`15`		`- ) {`
	`10`	`+ // return date and regexp values as is`
	`11`	`+ if (value instanceof Date \|\| value instanceof RegExp) {`
`16`	`12`	`return value;`
`17`	`13`	`}`
`18`	`14`
	`15`	`+ // return react element as is but remove _owner key because it can lead to recursion`
	`16`	`+ if (React.isValidElement(value)) {`
	`17`	`+ const copyObj = { ...value };`
	`18`	`+ delete copyObj._owner;`
	`19`	`+ return copyObj;`
	`20`	`+ }`
	`21`	`+`
`19`	`22`	`seen.add(value);`
`20`	`23`
`21`	`24`	`// make a copy of array with each item passed through the sorting algorithm`
`@@ -27,9 +30,6 @@ function safeSortObject(value: any, seen: WeakSet<any>): any {`
`27`	`30`	`return Object.keys(value)`
`28`	`31`	`.sort()`
`29`	`32`	`.reduce((result, key) => {`
`30`		`- if (key === '_owner') {`
`31`		`- return result;`
`32`		`- }`
`33`	`33`	`if (key === 'current' \|\| seen.has(value[key])) {`
`34`	`34`	`// eslint-disable-next-line no-param-reassign`
`35`	`35`	`result[key] = '[Circular]';`

Lines changed: 46 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`/* @flow */`
`2`	`2`
	`3`	`+import React from 'react';`
`3`	`4`	`import sortObject from './sortObject';`
`4`	`5`
`5`	`6`	`describe('sortObject', () => {`
`@@ -42,4 +43,49 @@ describe('sortObject', () => {`
`42`	`43`	`c: date,`
`43`	`44`	`});`
`44`	`45`	`});`
	`46`	`+`
	`47`	`+ describe('_owner key', () => {`
	`48`	`+ it('should preserve the _owner key for objects that are not react elements', () => {`
	`49`	`+ const fixture = {`
	`50`	`+ _owner: "_owner that doesn't belong to react element",`
	`51`	`+ foo: 'bar',`
	`52`	`+ };`
	`53`	`+`
	`54`	`+ expect(JSON.stringify(sortObject(fixture))).toEqual(`
	`55`	`+ JSON.stringify({`
	`56`	`+ _owner: "_owner that doesn't belong to react element",`
	`57`	`+ foo: 'bar',`
	`58`	`+ })`
	`59`	`+ );`
	`60`	`+ });`
	`61`	`+`
	`62`	`+ it('should remove the _owner key from top level react element', () => {`
	`63`	`+ const fixture = {`
	`64`	`+ reactElement: (`
	`65`	`+ <div>`
	`66`	`+ <span></span>`
	`67`	`+ </div>`
	`68`	`+ ),`
	`69`	`+ };`
	`70`	`+`
	`71`	`+ expect(JSON.stringify(sortObject(fixture))).toEqual(`
	`72`	`+ JSON.stringify({`
	`73`	`+ reactElement: {`
	`74`	`+ type: 'div',`
	`75`	`+ key: null,`
	`76`	`+ props: {`
	`77`	`+ children: {`
	`78`	`+ type: 'span',`
	`79`	`+ key: null,`
	`80`	`+ props: {},`
	`81`	`+ _owner: null,`
	`82`	`+ _store: {},`
	`83`	`+ },`
	`84`	`+ },`
	`85`	`+ _store: {},`
	`86`	`+ },`
	`87`	`+ })`
	`88`	`+ );`
	`89`	`+ });`
	`90`	`+ });`
`45`	`91`	`});`

Comments

(0)