diff --git a/src/renderers/shared/fiber/ReactFiberCompleteWork.js b/src/renderers/shared/fiber/ReactFiberCompleteWork.js index dcbdfcafe69..a188cf5813e 100644 --- a/src/renderers/shared/fiber/ReactFiberCompleteWork.js +++ b/src/renderers/shared/fiber/ReactFiberCompleteWork.js @@ -249,9 +249,20 @@ module.exports = function(config : HostConfig) { case HostText: let newText = workInProgress.pendingProps; if (current && workInProgress.stateNode != null) { - // If we have an alternate, that means this is an update and we need to - // schedule a side-effect to do the updates. - markUpdate(workInProgress); + const oldText = current.memoizedProps; + if (newText === null) { + // If this was a bail out we need to fall back to memoized text. + // This works the same way as HostComponent. + newText = workInProgress.memoizedProps; + if (newText === null) { + newText = oldText; + } + } + // If we have an alternate, that means this is an update and we need + // to schedule a side-effect to do the updates. + if (oldText !== newText) { + markUpdate(workInProgress); + } } else { if (typeof newText !== 'string') { if (workInProgress.stateNode === null) { diff --git a/src/renderers/shared/shared/__tests__/ReactMultiChildText-test.js b/src/renderers/shared/shared/__tests__/ReactMultiChildText-test.js index 582e1151e7b..8b0a180fb19 100644 --- a/src/renderers/shared/shared/__tests__/ReactMultiChildText-test.js +++ b/src/renderers/shared/shared/__tests__/ReactMultiChildText-test.js @@ -13,6 +13,7 @@ var React = require('React'); var ReactDOM = require('ReactDOM'); +var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); var ReactTestUtils = require('ReactTestUtils'); // Helpers @@ -57,28 +58,35 @@ var expectChildren = function(container, children) { var child = children[i]; if (typeof child === 'string') { - openingCommentNode = outerNode.childNodes[mountIndex]; - - expect(openingCommentNode.nodeType).toBe(8); - expect(openingCommentNode.nodeValue).toMatch(/ react-text: [0-9]+ /); - - if (child === '') { - textNode = null; - closingCommentNode = openingCommentNode.nextSibling; - mountIndex += 2; - } else { - textNode = openingCommentNode.nextSibling; - closingCommentNode = textNode.nextSibling; - mountIndex += 3; - } - - if (textNode) { + if (ReactDOMFeatureFlags.useFiber) { + textNode = outerNode.childNodes[mountIndex]; expect(textNode.nodeType).toBe(3); expect(textNode.data).toBe('' + child); + mountIndex++; + } else { + openingCommentNode = outerNode.childNodes[mountIndex]; + + expect(openingCommentNode.nodeType).toBe(8); + expect(openingCommentNode.nodeValue).toMatch(/ react-text: [0-9]+ /); + + if (child === '') { + textNode = null; + closingCommentNode = openingCommentNode.nextSibling; + mountIndex += 2; + } else { + textNode = openingCommentNode.nextSibling; + closingCommentNode = textNode.nextSibling; + mountIndex += 3; + } + + if (textNode) { + expect(textNode.nodeType).toBe(3); + expect(textNode.data).toBe('' + child); + } + + expect(closingCommentNode.nodeType).toBe(8); + expect(closingCommentNode.nodeValue).toBe(' /react-text '); } - - expect(closingCommentNode.nodeType).toBe(8); - expect(closingCommentNode.nodeValue).toBe(' /react-text '); } else { var elementDOMNode = outerNode.childNodes[mountIndex]; expect(elementDOMNode.tagName).toBe('DIV');