Question: ``` accept acceptCharset accessKey action allowFullScreen allowTransparency alt <del> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID className colSpan cols content contentEditable contextMenu controls </del> <ins> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet challenge checked classID className colSpan cols content contentEditable contextMenu controls </ins> coords crossOrigin data dateTime defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder <del> headers height hidden high href hrefLang htmlFor httpEquiv icon id label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </del> <ins> headers height hidden high href hrefLang htmlFor httpEquiv icon id keyParams keyType label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </ins> poster preload radioGroup readOnly rel required role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcSet start step style tabIndex target title type useMap value width wmode

I'm using tag to generate client certificates and I'm missing challenge and keytype attributes.
It would be cool if React gives us the opportunity to use different syntax for attrs and props: And may be: There would be no need to know what tags React supporting.
There's more planned to alleviate the issues around unknown elements and properties, but we're not there yet. We have no plans on to use different syntax. Adding the additional attributes here seems totally reasonable.
Will try to take a stab at this. I assume this is as simple as adding those props to , and then adding tests. Is that correct or am I missing anything significant?
It's even easier than that since we don't really have tests for the attributes. But do actually test in a couple browsers that changing values across renders is reflected appropriately (usually the issues is property vs attribute).
You're quick, guys. Thanks in advance!
By 'across renders' you mean simply triggering a re-render (by changing the value)?
Yea. I usually just make a simple component with a button that toggles state so I can test with multiple values easily.
Great. Thx.
I missed a detail in docs. Although, I don't need it, there's an additional attribute, keyparams, which is required with "dsa" and "ec" keytypes. See
Have this working, though I'm not entirely clear if these should be , or . I wasn't able to deduce the meaning of these from the code. Is there someplace I can read up on these?
Those are used to determine if we do or if we do when updating. means it doesn't matter and browsers should work with either. Currently we use properties in that case but we may switch that in the future. indicate that they must be set & removed as a property or an attribute.
Thanks. That makes sense. Had to use to get it to work properly across Chrome/FF/Safari. Your testing method great as well. Thx for your help


Question:
expect(log).toEqual([]); });  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => { const divRef = React.createRef(); class SimpleComponent extends React.Component { constructor(props) { super(props); this.state = { value: props.value, }; } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.value === prevState.value) { return null; } return {value: nextProps.value}; } shouldComponentUpdate(nextProps, nextState) { return nextState.value !== this.state.value; } render() { return
value: {this.state.value}
; } } const div = document.createElement('div'); ReactDOM.render(<SimpleComponent value="initial" />, div); expect(divRef.current.textContent).toBe('value: initial'); ReactDOM.render(<SimpleComponent value="updated" />, div); expect(divRef.current.textContent).toBe('value: updated'); });  it('should call getSnapshotBeforeUpdate before mutations are committed', () => { const log = [];

<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug What is the current behavior? In , the shallow renderer will set instance state in so the and will be the same in , which is different with the behavior of real rendering. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: given below class component: render with ReactDOM, the will return true since will be the old value : In shallow renderer, the behavior is different: What is the expected behavior? ShallowRenderer should not set the instance state in getDeriveStateFromProps, or in the we have no way to compare it. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I have tested this in master branch and 16.3, both not work. By the way this problem is related to airbnb/enzyme . If it's recoginzed as a bug I can provide a PR in next several days.


Question: } } } <del> this._updateStateFromStaticLifecycle(props); </del> // Read state after cWRP in case it calls setState <del> const state = this._newState || oldState; </del> <ins> let state = this._newState || oldState; if (typeof type.getDerivedStateFromProps === 'function') { const partialState = type.getDerivedStateFromProps.call( null, props, state, ); if (partialState != null) { state = Object.assign({}, state, partialState); } } </ins> let shouldUpdate = true; if (this._forcedUpdate) {


Question: var React = require('React'); var ReactElement = require('ReactElement'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactInstanceHandles = require('ReactInstanceHandles'); </ins> var ReactInstanceMap = require('ReactInstanceMap'); var ReactMount = require('ReactMount'); var ReactUpdates = require('ReactUpdates'); var SyntheticEvent = require('SyntheticEvent'); var assign = require('Object.assign'); <ins> var instantiateReactComponent = require('instantiateReactComponent'); </ins> var topLevelTypes = EventConstants.topLevelTypes;

We need a way to test the output of a single level React component without resolving it all the way down to the bottom layer (whatever that is). I'm thinking something like this: Basically, this fix needs to go through the entire life-cycle of ReactCompositeComponent. It just needs to bail out whenever it would've continued rendering.
Reopened so that we can track the remaining features (refs etc.)
Weird, I thought GitHub only closed issues if you used language like "fixes #NNNN", not if you simply mentioned the issue at all. Sorry about that.
The PR text included "WIP to "
Is the rest (refs support) blocked by or can more work be done now?
Any reason this doesn't support other than that it's not implemented yet? I was hoping to do something like
that's supposed to work. Can you post a minimal repro?
How do you do this?  does not return an instance.
It works if I use so I think could just return that from . (I also have to shim because React expects it to be defined for some reason.)
Finding this quite useful. But it has been a bit inconvenient to have among the children when an element is conditionally rendered.
The idea was to make the helpers ignore null which could help with that. Perhaps we could have return an iterable which traverses nested arrays and ignores null.
Really? Allowing nulls was a change intentionally introduced a long time ago. In I have an implementation of toArray.
Allowing empty children (null, undefined, boolean) was a controversial topic, where we eventually landed on null/boolean/undefined being passed through. That way you could explicitly treat an empty slot as something special. This landed very early on before we really started seeing pattern developing. However, IMO, we've seen that this leads to inconsistent implementations where null slots will break and is not possible to use. It is unclear whether a set of children allows nullable slots, and if they do, it is unclear what that means. For example, in a grid layout component, does an empty slot mean that there should be an empty column in the grid, or that it should be skipped? Therefore, a lot of our components end up with explicit null checks. Meaning boilerplate, and inconsistent behavior when they're forgotten.


Question: var React = require('React'); var ReactElement = require('ReactElement'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactInstanceHandles = require('ReactInstanceHandles'); </ins> var ReactInstanceMap = require('ReactInstanceMap'); var ReactMount = require('ReactMount'); var ReactUpdates = require('ReactUpdates'); var SyntheticEvent = require('SyntheticEvent'); var assign = require('Object.assign'); <ins> var instantiateReactComponent = require('instantiateReactComponent'); </ins> var topLevelTypes = EventConstants.topLevelTypes;

Therefore, I think the default should be to filter out nulls which is consistent with the behavior of the built-ins components. It is still possible to get access to the raw data if you have a different type of children in mind where empty slots is meaningful.
How should this work with the TestUtils functions. For example, this fails: I can't see any other info on mentioned at the start of this issue, is this what I'm missing? My end goal is simply to test that if I pass in 10 articles then 10 components get rendered. Any help would be awesome.
Hi David, the and functions are meant to be used with the output of , not shallow rendering. React doesn't currently provide a helper that will traverse trees for you. Your options for now are to describe the structure of the tree explicitly as in lines 4-5 of your example, or write your own helper module to find descendants you care about. hasn't been implemented yet. Refer to the for what's actually in React.
Cool, thanks for the reply I've returned to just using since the components I'm testing (and their children) don't have state/stores so don't really need mocking out anyway. One last (maybe stupid) question, what does mean?
So, I am trying to use Shallow Rendering and have it mostly only thing left I can’t figure out is the recommended way to mock events and how to get with events to pass. I've attempted to use the method directly from the in the test (). This seems dirty…is there a way to just say or something? I could post this on Stack Overflow, but I have had very little luck finding good information about Shallow Rendering online. If anyone has experience with shallow rendering and can give me some help you will be my hero... Source code: ! !
If I have an issue with shallow rendering, should I create a new issue, or post it here?
New issue please.
you might find that helps in providing higher-level assertions for the sort of thing you're doing there. In that particular case, I would avoid asserting on the event handler of the anchor in that test - but a different test would want to call to test the handler.
Super late reply, but "scry" is a fancy word for "find". I'm not sure why we don't just use "find".


Question: var React = require('React'); var ReactElement = require('ReactElement'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactInstanceHandles = require('ReactInstanceHandles'); </ins> var ReactInstanceMap = require('ReactInstanceMap'); var ReactMount = require('ReactMount'); var ReactUpdates = require('ReactUpdates'); var SyntheticEvent = require('SyntheticEvent'); var assign = require('Object.assign'); <ins> var instantiateReactComponent = require('instantiateReactComponent'); </ins> var topLevelTypes = EventConstants.topLevelTypes;

Maybe to avoid confusion between the plural and singular forms, whose names would otherwise differ only by one "s".
scry is because of legacy internal FB APIs. No reason.
Like I'm keenly on the lookout for a way to correctly unit test event handling in React code. Is there any documentation that anyone could point me to? I've looked at but it didn't seem to have something that scratches my particular itch. Here's my scenario (cut down): Where Problem looks like this: I'd like to be able to assert that is wired up for my component but I'm at a loss as to how to do that....
What you actually want is to assert that clicking interacts with the router. Pass in a fake context with a router mock (try Simon) then call Apologies for the brevity, on a phone.
Hi Thanks for responding. I'm not too clear on how to mock successfully when it comes to context. Digging through the source of I came up with this: However this dies a death with: Which makes me think I'm getting the context mocking wrong. Do you know how you successfully mock context with ? I'm using Jasmine (as you probably guessed!) I have a feeling I'm close...
Are you using React 0.13? You're probably hitting the difference between parent & owner context. Skin deep has a wrapper that helps with this - there's a context example the test suite, but the short answer is to wrap your render in another function call and let skin deep set up the context. This problem should go away in 0.14
I am using React 0.13, yes. If I port to 0.14 this issue should resolve? I might give that a crack if that's the case (it is in RC after all)
Problems with the upgrade. I have raised . Will have to return to this later I think.
I have written and as companion tools when testing with shallow rendering. It gives you the ability to diff on JSX strings rendered instead of React element objects.
Hi, I was wondering what was the state of: simulating events when using shallow rendering using refs when using shallow rendering How can we help make this happen if that's still planned?
This issue is pretty stale so I’ll close it.


Question: var React = require('React'); var ReactElement = require('ReactElement'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); <ins> var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactInstanceHandles = require('ReactInstanceHandles'); </ins> var ReactInstanceMap = require('ReactInstanceMap'); var ReactMount = require('ReactMount'); var ReactUpdates = require('ReactUpdates'); var SyntheticEvent = require('SyntheticEvent'); var assign = require('Object.assign'); <ins> var instantiateReactComponent = require('instantiateReactComponent'); </ins> var topLevelTypes = EventConstants.topLevelTypes;

If there are specific features you miss in the shallow renderer please create new issues with proposals on how they should work. Note that we a new that is much more feature-complete.


Question: // an external backing store so that we can freeze the whole object. // This can be replaced with a WeakMap once they are implemented in // commonly used development environments. <del> this._store = { validated: false, props: props }; </del> <ins> this._store = { props: props }; // To make comparing ReactElements easier for testing purposes, we make // the validation flag non-enumerable (where possible, which should // include every environment we run tests in), so the test framework // ignores it. try { Object.defineProperty(this._store, 'validated', { configurable: false, enumerable: false, writable: true }); } catch (x) { } this._store.validated = false; </ins> // We're not allowed to set props directly on the object so we early // return and rely on the prototype membrane to forward to the backing


Question: // an external backing store so that we can freeze the whole object. // This can be replaced with a WeakMap once they are implemented in // commonly used development environments. <del> this._store = { validated: false, props: props }; </del> <ins> this._store = { props: props }; // To make comparing ReactElements easier for testing purposes, we make // the validation flag non-enumerable (where possible, which should // include every environment we run tests in), so the test framework // ignores it. try { Object.defineProperty(this._store, 'validated', { configurable: false, enumerable: false, writable: true }); } catch (x) { } this._store.validated = false; </ins> // We're not allowed to set props directly on the object so we early // return and rely on the prototype membrane to forward to the backing


Question: // an external backing store so that we can freeze the whole object. // This can be replaced with a WeakMap once they are implemented in // commonly used development environments. <del> this._store = { validated: false, props: props }; </del> <ins> this._store = { props: props }; // To make comparing ReactElements easier for testing purposes, we make // the validation flag non-enumerable (where possible, which should // include every environment we run tests in), so the test framework // ignores it. try { Object.defineProperty(this._store, 'validated', { configurable: false, enumerable: false, writable: true }); } catch (x) { } this._store.validated = false; </ins> // We're not allowed to set props directly on the object so we early // return and rely on the prototype membrane to forward to the backing


Question: // an external backing store so that we can freeze the whole object. // This can be replaced with a WeakMap once they are implemented in // commonly used development environments. <del> this._store = { validated: false, props: props }; </del> <ins> this._store = { props: props }; // To make comparing ReactElements easier for testing purposes, we make // the validation flag non-enumerable (where possible, which should // include every environment we run tests in), so the test framework // ignores it. try { Object.defineProperty(this._store, 'validated', { configurable: false, enumerable: false, writable: true }); } catch (x) { } this._store.validated = false; </ins> // We're not allowed to set props directly on the object so we early // return and rely on the prototype membrane to forward to the backing


Question: ReactDOMIDOperations.updateInnerHTMLByID( 'testID', <del> {__html: ' testContent'} </del> <ins> ' testContent' </ins> ); expect(

reported the following issue on IRC: (Both on master and 4.0) The repro case is: 1) Render 2) Render 3) Render the same as 1) The div has its innerHTML empty instead of . I don't really know what's going on. can you guys look at it?
One other tidbit: this only seems to happen when the value is exactly the same in step 3 as it was in step 1. If it's different (i.e. ), things work as expected.
What happens if you change step 2 to a instead of a ? It works, right?
I just reduced the test case to 19 lines.
yeah changing 2) to use a span works as expected
If anyone wants to look into this, the bug is probably here
I cannot reproduce what you are seeing: It also bugs if I use a different string
I'm not able to reproduce that particular behavior given this small repro case. The original code had several more layers... will keep trying.
I know this is a very old issue but I had a similar problem and came across this. I found that this problem occurs when you do not add a property to the React component containing the property. So, does not seem to work reproducibly, whereas seems to. I think this could be related to React's diffing algorithm that might not properly treat a component with a statement if that component gets rerendered multiple times with different inner content. Just posting this here in case other people have the same issue and stumble upon this.
thx you saved my day :-)
Seems like the issue is back again. Thanks, solves the problem for me too.
If any of you can post a simple repro case showing the broken behavior here, I'd be happy to take a look at fixing it.
Took me a while to repro, but here you go: (ugly, but demonstrates the issue well)
Thanks. This is the same issue as . No fix currently, but using the key as a workaround is fine and I'll see if we can fix this sometime.
Thanks that was giving me fits!
If anyone is still seeing issues on 0.14, please make a new issue with a simple repro case.


Question: ReactDOMIDOperations.updateInnerHTMLByID( 'testID', <del> {__html: ' testContent'} </del> <ins> ' testContent' </ins> ); expect(

I have this issue, but can't reproduce in a simple example - my original code is layered and I think that's the reason the real DOM doesn't reconcile. In the react debugger is looks as dangerouslySetInnerHTML has proper __html value, but it doesn't equeal to the innerHTML of the actual element. I used an extremely simple (and equally nasty) workaround. Writing it here just in case it will help someone:
Reading out will rarely give you what you put in because the browser does various kinds of normalization on it. If you can repro with a standalone example though I'm happy to take a look.
well, that's more like a control shot :-)
Looks like the issue still exist in 16.4.1 when using on a tag, you cannot nest other or . issue is fixed by replacing the container with a
If you experience something similar three years later, and the original issue is closed, you can be sure it's a different unrelated issue. :-) Please file a new one. We don't keep track of closed issues so your feedback is unfortunately going into the void. When filing a new issue, please provide a reproducing example. when using dangerouslySetInnerHTML on a tag, you cannot nest other or This sounds like browsers work. You can't nest into . This is why React warns when you do it (except in which case React can't validate it).


Question: const commitTrees = ((rootToCommitTreeMap.get( rootID, ): any): Array<CommitTree>); if (commitIndex < commitTrees.length) { return commitTrees[commitIndex]; }

Describe what you were doing when the bug occurred: back to go back through the frames following a profile session. I think I got to zero and then clicked it again and then it errored Please do not remove the text below this line DevTools version: 4.8.2- Call stack: at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) Component stack: at CommitRankedAutoSizer (chrome-) at div at div at div at SettingsModalContextController (chrome-) at ProfilerProfiler (chrome-) at ErrorBoundary (chrome-) at PortaledContent (chrome-) at div at div at ProfilerContextController (chrome-) at TreeContextController (chrome-) at SettingsContextController (chrome-) at ModalDialogContextController (chrome-) at DevToolsDevTools (chrome-)
Please how do I replicate this? I don't seem to be able to replicate it.
sorry, I won't have time to create a mre. I was doing a recording on a site with a lot of components and a lot of frames in the recording. I ended up going to maybe frame 30 then clicking back rapidly to get back to 0 and I guess went to far or something. Feel free to close this, I thought that the logs might be enough and it was encouraging me to submit the issue.
Can I have a look ?
Maybe change this recursive function And use a loop going to correct the issue. If it is ok, i can work on it.
can you share how you were able to replicate the issue?
I think for there to be a stack overflow from calling itself, it would need to have profiling data with thousands (?) of commits. This function only recurses (at most) once per commit when processing data, and then, too, only if you jump through commits you haven't yet processed (so 0 -N would recurse N times). That being said, it seems like we could also rewrite this function to be iterative without too much trouble. Done in PR !
That's quite possible actually. The issue I was trying to diagnose was high CPU usage on an app that has spreadsheet like functionality, i.e.


Question: const commitTrees = ((rootToCommitTreeMap.get( rootID, ): any): Array<CommitTree>); if (commitIndex < commitTrees.length) { return commitTrees[commitIndex]; }

lots of components so I was trying to see exactly what was taking all the CPU time. Thanks for the PR. Hopefully next time this crops up it will solve it.
Great Should be released sometime in the next few days.


Question: return [<div />]; } <ins> function ComponentWithSymbolWarning() { console.warn('this is a symbol', Symbol('foo')); console.error('this is a symbol', Symbol.for('bar')); return null; } </ins> export default function ErrorsAndWarnings() { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1);

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: DevTools version 4.12.2- from within a React component where the last argument is typeof <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: The bug only happens when you make a change, so if you use the code sandbox link you need, open a new window, active dev tools, open the React dev tools and then uncomment line 5: only then will the error actually happen. I've located the culprit to this line of code And would offer the following change <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --React DevTools is implicitly converting a Symbol to a string. React DevTools does not implicitly try to convert a Symbol to a string.
Thanks for the report. Also reproduced with DevTools version 4.12.3- in Chrome 90 In addition to fixing the bug, it would also be nice to guard against devtools failing so that the UI is unaffected if devtools is faulty. /cc
Your the best, thanks for a quick turn around!


Question: expectTextNode(e.childNodes[1], 'bar'); } }); <ins> itRenders( 'a component returning text node between two text nodes', async render => { const B = () => 'b'; const e = await render(<div>{'a'}<B />{'c'}</div>); if ( render === serverRender || render === clientRenderOnServerString || render === streamRender ) { // In the server render output there's a comment between them. expect(e.childNodes.length).toBe(5); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[2], 'b'); expectTextNode(e.childNodes[4], 'c'); } else { expect(e.childNodes.length).toBe(3); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[1], 'b'); expectTextNode(e.childNodes[2], 'c'); } }, ); itRenders('a tree with sibling host and text nodes', async render => { class X extends React.Component { render() { return [null, [<Y key="1" />], false]; } } function Y() { return [<Z key="1" />, ['c']]; } function Z() { return null; } const e = await render( <div> {[['a'], 'b']} <div> <X key="1" /> d </div> e </div>, ); if ( render === serverRender || render === clientRenderOnServerString || render === streamRender ) { // In the server render output there's comments between text nodes. expect(e.childNodes.length).toBe(5); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[2], 'b'); expect(e.childNodes[3].childNodes.length).toBe(3); expectTextNode(e.childNodes[3].childNodes[0], 'c'); expectTextNode(e.childNodes[3].childNodes[2], 'd'); expectTextNode(e.childNodes[4], 'e'); } else { expect(e.childNodes.length).toBe(4); expectTextNode(e.childNodes[0], 'a'); expectTextNode(e.childNodes[1], 'b'); expect(e.childNodes[2].childNodes.length).toBe(2); expectTextNode(e.childNodes[2].childNodes[0], 'c'); expectTextNode(e.childNodes[2].childNodes[1], 'd'); expectTextNode(e.childNodes[3], 'e'); } }); </ins> }); describe('number children', function() {

Observed this on react This renders as . If you try to hydrate this you'll get the error: Text content did not match. Server: "bc" Client: "b".
I suppose the bug here is that we do not separate from here but we should.
React has been released. Please update , , and (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get out.
Everything looks good on my end, thanks!


Question: var inlineScriptCount = 0; <ins> // This method returns a nicely formated line of code pointing the // exactly location of the error `e`. // The line is limited in size so big lines of code are also shown // in a readable way. // Example: // // ... x', overflow:'scroll'}} id={} onScroll={this.scroll} class=" ... //                                 ^ var createSourceCodeErrorMessage = function(code, e) { var sourceLines = code.split('n'); var erroneousLine = sourceLines[e.lineNumber - 1]; // Removes any leading indenting spaces and gets the number of // chars indenting the `erroneousLine` var indentation = 0; erroneousLine = erroneousLine.replace(/^s+/, function(leadingSpaces) { indentation = leadingSpaces.length; return ''; }); // Defines the number of characters that are going to show // before and after the erroneous code var LIMIT = 30; var errorColumn = e.column - indentation; if (errorColumn > LIMIT) { erroneousLine = '... ' + erroneousLine.slice(errorColumn - LIMIT); errorColumn = 4 + LIMIT; } if (erroneousLine.length - errorColumn > LIMIT) { erroneousLine = erroneousLine.slice(0, errorColumn + LIMIT) + ' ...'; } var message = 'nn' + erroneousLine + 'n'; message += new Array(errorColumn - 1).join(' ') + '^'; return message; }; </ins> var transformCode = function(code, source) { var jsx = docblock.parseAsObject(docblock.extract(code)).jsx; if (jsx) { <del> var transformed = transformReact(code); </del> <ins> try { var transformed = transformReact(code); } catch(e) { e.message += 'n    at '; if (source) { if ('fileName' in e) { // We set `fileName` if it's supported by this error object and // a `source` was provided. // The error will correctly point to `source` in Firefox. e.fileName = source; } e.message += source + ':' + e.lineNumber + ':' + e.column; } else { e.message += location.href; } e.message += createSourceCodeErrorMessage(code, e); throw e; } </ins> var map = transformed.sourceMap.toJSON(); if (source == null) {

This makes it basically unusable in any nontrivial project. While people shouldn't be using this in production, we should still fix this bug for newbies and people using it for hackathons.
This should be relatively easy. What should we do with inline tags?


Question: } const {operations} = dataForRoot; <ins> if (operations.length <= commitIndex) { throw Error( `getCommitTree(): Invalid commit "${commitIndex}" for root "${rootID}". There are only "${operations.length}" commits.`, ); } </ins> <del> // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (commitIndex === 0) { const nodes = new Map(); // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </del> <ins> let commitTree: CommitTree = ((null: any): CommitTree); for (let index = commitTrees.length; index <= commitIndex; index++) { // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (index === 0) { const nodes = new Map(); </ins> <del> // Mutate the tree if (operations != null && commitIndex < operations.length) { const commitTree = updateTree({nodes, rootID}, operations[commitIndex]); </del> <ins> // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </ins> <del> if (__DEBUG__) { __printTree(commitTree); } </del> <ins> // Mutate the tree if (operations != null && index < operations.length) { commitTree = updateTree({nodes, rootID}, operations[index]); </ins> <del> commitTrees.push(commitTree); return commitTree; } } else { const previousCommitTree = getCommitTree({ commitIndex: commitIndex - 1, profilerStore, rootID, }); </del> <ins> if (__DEBUG__) { __printTree(commitTree); } </ins> <del> if (operations != null && commitIndex < operations.length) { const commitTree = updateTree( previousCommitTree, operations[commitIndex], ); </del> <ins> commitTrees.push(commitTree); } } else { const previousCommitTree = commitTrees[index - 1]; commitTree = updateTree(previousCommitTree, operations[index]); </ins> if (__DEBUG__) { __printTree(commitTree); } commitTrees.push(commitTree); <del> return commitTree; </del> } } <del> throw Error( `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit "${commitIndex}"`, ); </del> <ins> return commitTree; </ins> } function recursivelyInitializeTree(


Question: } const {operations} = dataForRoot; <ins> if (operations.length <= commitIndex) { throw Error( `getCommitTree(): Invalid commit "${commitIndex}" for root "${rootID}". There are only "${operations.length}" commits.`, ); } </ins> <del> // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (commitIndex === 0) { const nodes = new Map(); // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </del> <ins> let commitTree: CommitTree = ((null: any): CommitTree); for (let index = commitTrees.length; index <= commitIndex; index++) { // Commits are generated sequentially and cached. // If this is the very first commit, start with the cached snapshot and apply the first mutation. // Otherwise load (or generate) the previous commit and append a mutation to it. if (index === 0) { const nodes = new Map(); </ins> <del> // Mutate the tree if (operations != null && commitIndex < operations.length) { const commitTree = updateTree({nodes, rootID}, operations[commitIndex]); </del> <ins> // Construct the initial tree. recursivelyInitializeTree(rootID, 0, nodes, dataForRoot); </ins> <del> if (__DEBUG__) { __printTree(commitTree); } </del> <ins> // Mutate the tree if (operations != null && index < operations.length) { commitTree = updateTree({nodes, rootID}, operations[index]); </ins> <del> commitTrees.push(commitTree); return commitTree; } } else { const previousCommitTree = getCommitTree({ commitIndex: commitIndex - 1, profilerStore, rootID, }); </del> <ins> if (__DEBUG__) { __printTree(commitTree); } </ins> <del> if (operations != null && commitIndex < operations.length) { const commitTree = updateTree( previousCommitTree, operations[commitIndex], ); </del> <ins> commitTrees.push(commitTree); } } else { const previousCommitTree = commitTrees[index - 1]; commitTree = updateTree(previousCommitTree, operations[index]); </ins> if (__DEBUG__) { __printTree(commitTree); } commitTrees.push(commitTree); <del> return commitTree; </del> } } <del> throw Error( `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit "${commitIndex}"`, ); </del> <ins> return commitTree; </ins> } function recursivelyInitializeTree(


Question:
 /** * Copyright 2013-2014, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ "use strict"; var React; var ReactTestUtils; var mocks; var warn; describe('ReactTestUtils', function() { beforeEach(function() { mocks = require('mocks'); React = require('React'); ReactTestUtils = require('ReactTestUtils'); warn = console.warn; console.warn = mocks.getMockFunction(); }); afterEach(function() { console.warn = warn; }); it('should have shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (

 ); } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); }); it('lets you update shallowly rendered components', function() { var SomeComponent = React.createClass({ getInitialState: function() { return {clicked: false}; }, onClick: function() { this.setState({clicked: true}); }, render: function() { var className = this.state.clicked ? 'was-clicked' : ''; if (this.props.aNew === 'prop') { return (  Test link  ); } else { return (

 ); } } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); shallowRenderer.render(<SomeComponent aNew="prop" />); var updatedResult = shallowRenderer.getRenderOutput(); expect(updatedResult.type).toBe('a'); var mockEvent = {}; updatedResult.props.onClick(mockEvent); var updatedResultCausedByClick = shallowRenderer.getRenderOutput(); expect(updatedResultCausedByClick.type).toBe('a'); expect(updatedResultCausedByClick.props.className).toBe('was-clicked'); }); });


Question:
 /** * Copyright 2013-2014, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ "use strict"; var React; var ReactTestUtils; var mocks; var warn; describe('ReactTestUtils', function() { beforeEach(function() { mocks = require('mocks'); React = require('React'); ReactTestUtils = require('ReactTestUtils'); warn = console.warn; console.warn = mocks.getMockFunction(); }); afterEach(function() { console.warn = warn; }); it('should have shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (

 ); } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); }); it('lets you update shallowly rendered components', function() { var SomeComponent = React.createClass({ getInitialState: function() { return {clicked: false}; }, onClick: function() { this.setState({clicked: true}); }, render: function() { var className = this.state.clicked ? 'was-clicked' : ''; if (this.props.aNew === 'prop') { return (  Test link  ); } else { return (

 ); } } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); shallowRenderer.render(<SomeComponent aNew="prop" />); var updatedResult = shallowRenderer.getRenderOutput(); expect(updatedResult.type).toBe('a'); var mockEvent = {}; updatedResult.props.onClick(mockEvent); var updatedResultCausedByClick = shallowRenderer.getRenderOutput(); expect(updatedResultCausedByClick.type).toBe('a'); expect(updatedResultCausedByClick.props.className).toBe('was-clicked'); }); });


Question:
 /** * Copyright 2013-2014, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ "use strict"; var React; var ReactTestUtils; var mocks; var warn; describe('ReactTestUtils', function() { beforeEach(function() { mocks = require('mocks'); React = require('React'); ReactTestUtils = require('ReactTestUtils'); warn = console.warn; console.warn = mocks.getMockFunction(); }); afterEach(function() { console.warn = warn; }); it('should have shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (

 ); } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); }); it('lets you update shallowly rendered components', function() { var SomeComponent = React.createClass({ getInitialState: function() { return {clicked: false}; }, onClick: function() { this.setState({clicked: true}); }, render: function() { var className = this.state.clicked ? 'was-clicked' : ''; if (this.props.aNew === 'prop') { return (  Test link  ); } else { return (

 ); } } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); shallowRenderer.render(<SomeComponent aNew="prop" />); var updatedResult = shallowRenderer.getRenderOutput(); expect(updatedResult.type).toBe('a'); var mockEvent = {}; updatedResult.props.onClick(mockEvent); var updatedResultCausedByClick = shallowRenderer.getRenderOutput(); expect(updatedResultCausedByClick.type).toBe('a'); expect(updatedResultCausedByClick.props.className).toBe('was-clicked'); }); });


Question:
 /** * Copyright 2013-2014, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ "use strict"; var React; var ReactTestUtils; var mocks; var warn; describe('ReactTestUtils', function() { beforeEach(function() { mocks = require('mocks'); React = require('React'); ReactTestUtils = require('ReactTestUtils'); warn = console.warn; console.warn = mocks.getMockFunction(); }); afterEach(function() { console.warn = warn; }); it('should have shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (

 ); } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); }); it('lets you update shallowly rendered components', function() { var SomeComponent = React.createClass({ getInitialState: function() { return {clicked: false}; }, onClick: function() { this.setState({clicked: true}); }, render: function() { var className = this.state.clicked ? 'was-clicked' : ''; if (this.props.aNew === 'prop') { return (  Test link  ); } else { return (

 ); } } }); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent />); var result = shallowRenderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ ,  ]); shallowRenderer.render(<SomeComponent aNew="prop" />); var updatedResult = shallowRenderer.getRenderOutput(); expect(updatedResult.type).toBe('a'); var mockEvent = {}; updatedResult.props.onClick(mockEvent); var updatedResultCausedByClick = shallowRenderer.getRenderOutput(); expect(updatedResultCausedByClick.type).toBe('a'); expect(updatedResultCausedByClick.props.className).toBe('was-clicked'); }); });


Question: _updateDOMChildren: function(lastProps, transaction) { var nextProps = this.props; <del> var lastUsedContent = </del> <ins> var lastContent = </ins> CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null; <del> var contentToUse = </del> <ins> var nextContent = </ins> CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null; <ins> var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html; var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html; </ins> // Note the use of `!=` which checks for null or undefined. <ins> var lastChildren = lastContent != null ? null : lastProps.children; var nextChildren = nextContent != null ? null : nextProps.children; </ins> <del> var lastUsedChildren = lastUsedContent != null ? null : lastProps.children; var childrenToUse = contentToUse != null ? null : nextProps.children; </del> <ins> // If we're switching from children to content/html or vice versa, remove // the old content var lastHasContentOrHtml = lastContent != null || lastHtml != null; var nextHasContentOrHtml = nextContent != null || nextHtml != null; if (lastChildren != null && nextChildren == null) { this.updateChildren(null, transaction); } else if (lastHasContentOrHtml && !nextHasContentOrHtml) { this.updateTextContent(''); } </ins> <del> if (contentToUse != null) { var childrenRemoved = lastUsedChildren != null && childrenToUse == null; if (childrenRemoved) { this.updateChildren(null, transaction); } if (lastUsedContent !== contentToUse) { this.updateTextContent('' + contentToUse); </del> <ins> if (nextContent != null) { if (lastContent !== nextContent) { this.updateTextContent('' + nextContent); </ins> } <del> } else { var contentRemoved = lastUsedContent != null && contentToUse == null; if (contentRemoved) { this.updateTextContent(''); </del> <ins> } else if (nextHtml != null) { if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextHtml ); </ins> } <del> this.updateChildren(flattenChildren(nextProps.children), transaction); </del> <ins> } else if (nextChildren != null) { this.updateChildren(flattenChildren(nextChildren), transaction); </ins> } },


Question: _updateDOMChildren: function(lastProps, transaction) { var nextProps = this.props; <del> var lastUsedContent = </del> <ins> var lastContent = </ins> CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null; <del> var contentToUse = </del> <ins> var nextContent = </ins> CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null; <ins> var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html; var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html; </ins> // Note the use of `!=` which checks for null or undefined. <ins> var lastChildren = lastContent != null ? null : lastProps.children; var nextChildren = nextContent != null ? null : nextProps.children; </ins> <del> var lastUsedChildren = lastUsedContent != null ? null : lastProps.children; var childrenToUse = contentToUse != null ? null : nextProps.children; </del> <ins> // If we're switching from children to content/html or vice versa, remove // the old content var lastHasContentOrHtml = lastContent != null || lastHtml != null; var nextHasContentOrHtml = nextContent != null || nextHtml != null; if (lastChildren != null && nextChildren == null) { this.updateChildren(null, transaction); } else if (lastHasContentOrHtml && !nextHasContentOrHtml) { this.updateTextContent(''); } </ins> <del> if (contentToUse != null) { var childrenRemoved = lastUsedChildren != null && childrenToUse == null; if (childrenRemoved) { this.updateChildren(null, transaction); } if (lastUsedContent !== contentToUse) { this.updateTextContent('' + contentToUse); </del> <ins> if (nextContent != null) { if (lastContent !== nextContent) { this.updateTextContent('' + nextContent); </ins> } <del> } else { var contentRemoved = lastUsedContent != null && contentToUse == null; if (contentRemoved) { this.updateTextContent(''); </del> <ins> } else if (nextHtml != null) { if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextHtml ); </ins> } <del> this.updateChildren(flattenChildren(nextProps.children), transaction); </del> <ins> } else if (nextChildren != null) { this.updateChildren(flattenChildren(nextChildren), transaction); </ins> } },


Question: * @internal */ unmountComponent: function() { <ins> this.unmountChildren(); </ins> ReactEventEmitter.deleteAllListeners(this._rootNodeID); ReactComponent.Mixin.unmountComponent.call(this); <del> this.unmountChildren(); </del> } };

When unmounting components like this: a memory leak happens because ReactMount.getID(node) puts DOM nodes back to nodeCache if they are not there.. just right after they were purged from cache. Here is what's happing when unmounting that example component: label component gets purged from nodeCache when ReactDOMInput component is going to unmount it calls this method: which contains this.getDOMNode() which iterates through the children of the Form element calling getID() on each of them.. which puts these elements back into the cache. So first they were purged and here they are all put back in cache causing a memory leak :( I'm playing with React just 3rd day so not sure of a way to correctly fix this issue
(I took the liberty to edit your comment to add syntax highlighting)
I can't reproduce this. With this diff applied, I loaded http://127.0.0.1:8000/examples/ballmer-peak/ in the console and checked -- it was empty. Am I misunderstanding?
Yes. You've missed one more user defined component in there.. Here you go:
Thanks, fixed in .
Thank you for fast fix :)
Thanks for the find/fix!


Should those comment sections exist? I'd rather people come to IRC. Their questions are often neglected at the bottom of a doc page.
:+1: for shutting down comments
+1
:+1:


Question: styleUpdates[styleName] = ''; } } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { // http://jsperf.com/emptying-speed ReactComponent.DOMIDOperations.updateTextContentByID( this._rootNodeID, '' ); </del> } else if (registrationNames[propKey]) { deleteListener(this._rootNodeID, propKey); <del> } else { </del> <ins> } else if ( DOMProperty.isStandardName[propKey] || DOMProperty.isCustomAttribute(propKey)) { </ins> ReactComponent.DOMIDOperations.deletePropertyByID( this._rootNodeID, propKey


Question: styleUpdates[styleName] = ''; } } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { // http://jsperf.com/emptying-speed ReactComponent.DOMIDOperations.updateTextContentByID( this._rootNodeID, '' ); </del> } else if (registrationNames[propKey]) { deleteListener(this._rootNodeID, propKey); <del> } else { </del> <ins> } else if ( DOMProperty.isStandardName[propKey] || DOMProperty.isCustomAttribute(propKey)) { </ins> ReactComponent.DOMIDOperations.deletePropertyByID( this._rootNodeID, propKey


Question: case topLevelTypes.topDoubleClick: case topLevelTypes.topMouseDown: case topLevelTypes.topMouseMove: <ins> case topLevelTypes.topMouseOut: case topLevelTypes.topMouseOver: </ins> case topLevelTypes.topMouseUp: EventConstructor = SyntheticMouseEvent; break;

Someone had the trouble in IRC about it. Edit: changed the subject from "document it" to "support it", because the documentation issue is already at .
Better yet, support it!
Yeah, is there a particular reason it's not supported?
Curious if you've seen the . It's automatically injected into React by default, so you can use it today. IMHO it's (much) better than . (I suppose we could support just for the sake of completeness, but I thought I'd just make sure you guys were aware of .)
We discussed this for a bit on IRC -- was just confused that silently didn't work whereas other events did -- perhaps adding more documentation () will fix the problem too but it seems like we might as well add for completeness. (I agree that enter/leave are much more useful and suggested that over/out are likely missing simply because no one has needed them!)
Agree - I believe there are a few extra allocations (not-pooled) occuring in the event system already today. I'd love to track those down before adding more mouse-move event allocations. If you open the memory profiler in Chrome and move the mouse around, you'll see memory being allocated (and then properly freed of course) but if we use es everywhere, we should be flat. That would make me much more comfortable with adding to . Edit: Just checked out - we already have which fires way more frequently than would so it's probably not such a big deal to add - though we really should get rid of all additional allocations in the event path.
Just started to look a little bit into the allocations here. Redefining trapBubbledEvent in ReactEventEmitter with: still shows allocations in the Chrome memory timeline view, so I'm not convinced that there's anything we can do here? (Replacing trapBubbledEvent itself with a noop makes the allocations go away. simply calls addEventListener.)
I am pretty sure we have done all we can here -- at least I think we've tracked down every callsite where PooledClass would have helped us. I updated our recast transforms to log every syntax construct that would cause an obvious allocation and couldn't find anything. I was thinking maybe there was an array slice or a bind() in there, but experiment shows that this is not the case.


Question: case topLevelTypes.topDoubleClick: case topLevelTypes.topMouseDown: case topLevelTypes.topMouseMove: <ins> case topLevelTypes.topMouseOut: case topLevelTypes.topMouseOver: </ins> case topLevelTypes.topMouseUp: EventConstructor = SyntheticMouseEvent; break;

(I didn't verify that we don't have more allocations than the empty-function case; I don't know of a good way to do so.)
I might be misinformed, but isn't there quite a difference in use cases between mouseenter and mouseover events? Here's a theoretical (non-react) example working with some hover states for nested elements: I tried to apply the above concept in react (with nested components) using onMouseEnter instead, but it obviously fails because it's only triggered once on the top-most element. Moving into a child element and back has no effect. Maybe there's a better approach for this in react altogether?
If you render the child hierarchy with React, you can listen to on each child element you are interested in instead of using event bubbling. It is cheap.


Question: ); } <del> // stub element used by act() when flushing effects let actContainerElement = document.createElement('div'); </del> <ins> // a stub element, lazily initialized, used by act() when flushing effects let actContainerElement = null; </ins> /** * Utilities for making it easy to test React components.

<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug. Behavior regression. What is the current behavior? Package throws when being required in Node. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: What is the expected behavior? should not throw in "pure" node (without providing fake document on global). Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? happens on 16.8.0 previous versions work.
We also got this issue after upgrading to 16.8.0
Found the fix and putting together a PR now edit: now on the case


Question: html: createFullPageComponent(ReactDOM.html), head: createFullPageComponent(ReactDOM.head), <del> title: createFullPageComponent(ReactDOM.title), </del> body: createFullPageComponent(ReactDOM.body) });

Here's an example at jsbin: Clicking for the first time works (mounts a SVG +), but when clicking the same button again (which should unmount the rect+title), react throws an exception. I have no clue how to get around this. Help is very much appreciated. Thanks in advance!
Ah, this is because React doesn't let you unmount the HTML element. I don't believe there's a workaround right now, sorry. cc
Fixed by .


Question:
expect(stub.getDOMNode().innerHTML).toEqual(''); });  it("should transition from string content to innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(
hello
 ); expect(stub.getDOMNode().innerHTML).toEqual('hello'); stub.receiveProps( {dangerouslySetInnerHTML: {__html: 'goodbye'}}, transaction ); expect(stub.getDOMNode().innerHTML).toEqual('goodbye'); }); it("should transition from innerHTML to string content", function() { var stub = ReactTestUtils.renderIntoDocument(
 ); expect(stub.getDOMNode().innerHTML).toEqual('bonjour'); stub.receiveProps({children: 'adieu'}, transaction); expect(stub.getDOMNode().innerHTML).toEqual('adieu'); });  it("should not incur unnecessary DOM mutations", function() { var stub = ReactTestUtils.renderIntoDocument(
);


Question:
expect(stub.getDOMNode().innerHTML).toEqual(''); });  it("should transition from string content to innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(
hello
 ); expect(stub.getDOMNode().innerHTML).toEqual('hello'); stub.receiveProps( {dangerouslySetInnerHTML: {__html: 'goodbye'}}, transaction ); expect(stub.getDOMNode().innerHTML).toEqual('goodbye'); }); it("should transition from innerHTML to string content", function() { var stub = ReactTestUtils.renderIntoDocument(
 ); expect(stub.getDOMNode().innerHTML).toEqual('bonjour'); stub.receiveProps({children: 'adieu'}, transaction); expect(stub.getDOMNode().innerHTML).toEqual('adieu'); });  it("should not incur unnecessary DOM mutations", function() { var stub = ReactTestUtils.renderIntoDocument(
);


Question: SimulateNative: {}, act(callback: () => void): Thenable { <ins> if (actContainerElement === null) { // warn if we can't actually create the stub element if (__DEV__) { warningWithoutStack( typeof document !== 'undefined' && document !== null && typeof document.createElement === 'function', 'It looks like you called TestUtils.act(...) in a non-browser environment. ' + "If you're using TestRenderer for your tests, you should call " + 'TestRenderer.act(...) instead of TestUtils.act(...).', ); } // then make it actContainerElement = document.createElement('div'); } const result = ReactDOM.unstable_batchedUpdates(callback); </ins> // note: keep these warning messages in sync with // createReactNoop.js and ReactTestRenderer.js <del> const result = ReactDOM.unstable_batchedUpdates(callback); </del> if (__DEV__) { if (result !== undefined) { let addendum;


Question: reactComponentExpect = require('reactComponentExpect'); React = require('React'); <ins> ReactComponent = require('ReactComponent'); </ins> ReactCurrentOwner = require('ReactCurrentOwner'); ReactDoNotBindDeprecated = require('ReactDoNotBindDeprecated'); ReactPropTypes = require('ReactPropTypes');


Question: cellPadding: null, cellSpacing: null, charSet: MUST_USE_ATTRIBUTE, <ins> challenge: MUST_USE_ATTRIBUTE, </ins> checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, classID: MUST_USE_ATTRIBUTE, // To set className on SVG elements, it's necessary to use .setAttribute;

I'm using tag to generate client certificates and I'm missing challenge and keytype attributes.
It would be cool if React gives us the opportunity to use different syntax for attrs and props: And may be: There would be no need to know what tags React supporting.
There's more planned to alleviate the issues around unknown elements and properties, but we're not there yet. We have no plans on to use different syntax. Adding the additional attributes here seems totally reasonable.
Will try to take a stab at this. I assume this is as simple as adding those props to , and then adding tests. Is that correct or am I missing anything significant?
It's even easier than that since we don't really have tests for the attributes. But do actually test in a couple browsers that changing values across renders is reflected appropriately (usually the issues is property vs attribute).
You're quick, guys. Thanks in advance!
By 'across renders' you mean simply triggering a re-render (by changing the value)?
Yea. I usually just make a simple component with a button that toggles state so I can test with multiple values easily.
Great. Thx.
I missed a detail in docs. Although, I don't need it, there's an additional attribute, keyparams, which is required with "dsa" and "ec" keytypes. See
Have this working, though I'm not entirely clear if these should be , or . I wasn't able to deduce the meaning of these from the code. Is there someplace I can read up on these?
Those are used to determine if we do or if we do when updating. means it doesn't matter and browsers should work with either. Currently we use properties in that case but we may switch that in the future. indicate that they must be set & removed as a property or an attribute.
Thanks. That makes sense. Had to use to get it to work properly across Chrome/FF/Safari. Your testing method great as well. Thx for your help


Question: ReactCurrentOwner.current = this; var inst = this._instance; try { <del> renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } </del> <ins> renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); </ins> } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null;

We need a way to test the output of a single level React component without resolving it all the way down to the bottom layer (whatever that is). I'm thinking something like this: Basically, this fix needs to go through the entire life-cycle of ReactCompositeComponent. It just needs to bail out whenever it would've continued rendering.
Reopened so that we can track the remaining features (refs etc.)
Weird, I thought GitHub only closed issues if you used language like "fixes #NNNN", not if you simply mentioned the issue at all. Sorry about that.
The PR text included "WIP to "
Is the rest (refs support) blocked by or can more work be done now?
Any reason this doesn't support other than that it's not implemented yet? I was hoping to do something like
that's supposed to work. Can you post a minimal repro?
How do you do this?  does not return an instance.
It works if I use so I think could just return that from . (I also have to shim because React expects it to be defined for some reason.)
Finding this quite useful. But it has been a bit inconvenient to have among the children when an element is conditionally rendered.
The idea was to make the helpers ignore null which could help with that. Perhaps we could have return an iterable which traverses nested arrays and ignores null.
Really? Allowing nulls was a change intentionally introduced a long time ago. In I have an implementation of toArray.
Allowing empty children (null, undefined, boolean) was a controversial topic, where we eventually landed on null/boolean/undefined being passed through. That way you could explicitly treat an empty slot as something special. This landed very early on before we really started seeing pattern developing. However, IMO, we've seen that this leads to inconsistent implementations where null slots will break and is not possible to use. It is unclear whether a set of children allows nullable slots, and if they do, it is unclear what that means. For example, in a grid layout component, does an empty slot mean that there should be an empty column in the grid, or that it should be skipped? Therefore, a lot of our components end up with explicit null checks. Meaning boilerplate, and inconsistent behavior when they're forgotten.


Question: ReactCurrentOwner.current = this; var inst = this._instance; try { <del> renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } </del> <ins> renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); </ins> } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null;

Therefore, I think the default should be to filter out nulls which is consistent with the behavior of the built-ins components. It is still possible to get access to the raw data if you have a different type of children in mind where empty slots is meaningful.
How should this work with the TestUtils functions. For example, this fails: I can't see any other info on mentioned at the start of this issue, is this what I'm missing? My end goal is simply to test that if I pass in 10 articles then 10 components get rendered. Any help would be awesome.
Hi David, the and functions are meant to be used with the output of , not shallow rendering. React doesn't currently provide a helper that will traverse trees for you. Your options for now are to describe the structure of the tree explicitly as in lines 4-5 of your example, or write your own helper module to find descendants you care about. hasn't been implemented yet. Refer to the for what's actually in React.
Cool, thanks for the reply I've returned to just using since the components I'm testing (and their children) don't have state/stores so don't really need mocking out anyway. One last (maybe stupid) question, what does mean?
So, I am trying to use Shallow Rendering and have it mostly only thing left I can’t figure out is the recommended way to mock events and how to get with events to pass. I've attempted to use the method directly from the in the test (). This seems dirty…is there a way to just say or something? I could post this on Stack Overflow, but I have had very little luck finding good information about Shallow Rendering online. If anyone has experience with shallow rendering and can give me some help you will be my hero... Source code: ! !
If I have an issue with shallow rendering, should I create a new issue, or post it here?
New issue please.
you might find that helps in providing higher-level assertions for the sort of thing you're doing there. In that particular case, I would avoid asserting on the event handler of the anchor in that test - but a different test would want to call to test the handler.
Super late reply, but "scry" is a fancy word for "find". I'm not sure why we don't just use "find".


Question: ReactCurrentOwner.current = this; var inst = this._instance; try { <del> renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } </del> <ins> renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); </ins> } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null;

Maybe to avoid confusion between the plural and singular forms, whose names would otherwise differ only by one "s".
scry is because of legacy internal FB APIs. No reason.
Like I'm keenly on the lookout for a way to correctly unit test event handling in React code. Is there any documentation that anyone could point me to? I've looked at but it didn't seem to have something that scratches my particular itch. Here's my scenario (cut down): Where Problem looks like this: I'd like to be able to assert that is wired up for my component but I'm at a loss as to how to do that....
What you actually want is to assert that clicking interacts with the router. Pass in a fake context with a router mock (try Simon) then call Apologies for the brevity, on a phone.
Hi Thanks for responding. I'm not too clear on how to mock successfully when it comes to context. Digging through the source of I came up with this: However this dies a death with: Which makes me think I'm getting the context mocking wrong. Do you know how you successfully mock context with ? I'm using Jasmine (as you probably guessed!) I have a feeling I'm close...
Are you using React 0.13? You're probably hitting the difference between parent & owner context. Skin deep has a wrapper that helps with this - there's a context example the test suite, but the short answer is to wrap your render in another function call and let skin deep set up the context. This problem should go away in 0.14
I am using React 0.13, yes. If I port to 0.14 this issue should resolve? I might give that a crack if that's the case (it is in RC after all)
Problems with the upgrade. I have raised . Will have to return to this later I think.
I have written and as companion tools when testing with shallow rendering. It gives you the ability to diff on JSX strings rendered instead of React element objects.
Hi, I was wondering what was the state of: simulating events when using shallow rendering using refs when using shallow rendering How can we help make this happen if that's still planned?
This issue is pretty stale so I’ll close it.


Question: ReactCurrentOwner.current = this; var inst = this._instance; try { <del> renderedComponent = inst.render(); if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } </del> <ins> renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); </ins> } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null;

If there are specific features you miss in the shallow renderer please create new issues with proposals on how they should work. Note that we a new that is much more feature-complete.


Question: urls.unshift('../node_modules/es5-shim/es5-shim.js'); } <del> var cacheBust = '?_=' + Date.now().toString(36); </del> <ins> var cacheBust = '?_=' + (+new Date).toString(36); </ins> for (var urls_index = -1, urls_length = urls.length; ++urls_index < urls_length;) { document.write('<script src="' + urls[urls_index] + cacheBust + '"></script>');

Nor sure what that means other than that the tests are flakey :'(
https://travis-
https://travis-


Question: static .grunt _SpecRunner.html <ins> __benchmarks__ </ins> build/ .module-cache *.gem

I am using a few react components made by various libraries like material ui and i get this message on doing i can see only one version of react installed. I am using gulp and browserify for my build process. Any idea how i can solve this?
I've found this is common when modules have React as a dependency rather than a peerDependency in the npm package. If you're using webpack, I've got around this by creating an alias, perhaps you can do something similar in Gulp.
Awesome that helped.. Just sharing some ref for others Thanks.
Also please file issues in such libraries and gently ask them to use for instead .
For those who do not want to install any other packages for resolving. Configure a require key in the browserify object and that will take care of the error


Question: asap "~2.0.3" prop-types@^15.5.8: <del> version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" </del> <ins> version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" </ins> dependencies: fbjs "^0.8.9" <ins> loose-envify "^1.3.1" </ins> prr@~0.0.0: version "0.0.0"

Check that they were a part of the latest internal sync. For stable releases, prefer that they’ve been landed for a week or so. Only skip this step if you really know what you’re doing! [x] You’re in [x] You’re in [x] You’re in [x] You’re in If not, ping someone on the team![x] Ensure you’re on [x] Do a . [x] Check that your local output matches the commit list. [x] Run in the repo root.[x] For : [x] Look at the version range of in root . [x] Ensure all depending on specify the same range. [x] Run in the repo root. (Don’t miss the caret!) [x] For : [x] Look at the version range of in root . [x] Ensure all depending on specify the same range. [x] Run in the repo root. (Don’t miss the caret!) [x] For : [x] Look at the version range of in root . [x] Ensure all depending on specify the same range. [x] Run in the repo root. (Don’t miss the caret!) [x] This might change the lockfile. This should not change any . [x] Commit the changes, if any. (see )[x] Edit: is broken in the 16 branch but this shouldn't block RC, and will be fixed asap by and in [x] Run in the repo root. [x] Run in the repo root. [x] Run in the repo root.[x] Run in the repo root. [x] If changes, [x] Maybe: If we still have a separate branch for docs when you’re reading this, we need to cherry-pick that commit to that branch. This makes sure the website decoder knows about the updated error codes. But ideally we should just change docs to serve from master. (See and ) [x] Update export in [x] Update in all : [x] [x] [x] [x] [x] If you see any other packages, update this list :-) [x] Run to verify your changes. [x][x] Run in the repo root.[x] Open in the browser for a smoke test.


Question: asap "~2.0.3" prop-types@^15.5.8: <del> version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" </del> <ins> version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" </ins> dependencies: fbjs "^0.8.9" <ins> loose-envify "^1.3.1" </ins> prr@~0.0.0: version "0.0.0"

[x] It should say “Hello world!”[x] Go to and run [x] [x] Go to the repo root and run [x] Open http://localhost:5000/fixtures/packaging/ and verify every iframe shows “Hello World!”[x] Run [x] Run [x] Go to [x] For every subfolder: [x] For non-stable versions: Run in the subfolder. [x] For stable versions: Run in the subfolder.[ ] [ ] [ ]
w00t~


Question: this._updater, ); <del> this._updateStateFromStaticLifecycle(element.props); </del> <ins> if (typeof element.type.getDerivedStateFromProps === 'function') { const partialState = element.type.getDerivedStateFromProps.call( null, element.props, this._instance.state, ); if (partialState != null) { this._instance.state = Object.assign( {}, this._instance.state, partialState, ); } } </ins> if (element.type.hasOwnProperty('contextTypes')) { currentlyValidatingElement = element;

<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug What is the current behavior? In , the shallow renderer will set instance state in so the and will be the same in , which is different with the behavior of real rendering. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: given below class component: render with ReactDOM, the will return true since will be the old value : In shallow renderer, the behavior is different: What is the expected behavior? ShallowRenderer should not set the instance state in getDeriveStateFromProps, or in the we have no way to compare it. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I have tested this in master branch and 16.3, both not work. By the way this problem is related to airbnb/enzyme . If it's recoginzed as a bug I can provide a PR in next several days.


Question: }); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };


Question: }); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };


Question: }); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };


Question: }); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };


Question: // For quickly matching children type, to test if can be treated as content. var CONTENT_TYPES = {'string': true, 'number': true}; <del> var DANGEROUSLY_SET_INNER_HTML = keyOf({dangerouslySetInnerHTML: null}); </del> var STYLE = keyOf({style: null}); /**

reported the following issue on IRC: (Both on master and 4.0) The repro case is: 1) Render 2) Render 3) Render the same as 1) The div has its innerHTML empty instead of . I don't really know what's going on. can you guys look at it?
One other tidbit: this only seems to happen when the value is exactly the same in step 3 as it was in step 1. If it's different (i.e. ), things work as expected.
What happens if you change step 2 to a instead of a ? It works, right?
I just reduced the test case to 19 lines.
yeah changing 2) to use a span works as expected
If anyone wants to look into this, the bug is probably here
I cannot reproduce what you are seeing: It also bugs if I use a different string
I'm not able to reproduce that particular behavior given this small repro case. The original code had several more layers... will keep trying.
I know this is a very old issue but I had a similar problem and came across this. I found that this problem occurs when you do not add a property to the React component containing the property. So, does not seem to work reproducibly, whereas seems to. I think this could be related to React's diffing algorithm that might not properly treat a component with a statement if that component gets rerendered multiple times with different inner content. Just posting this here in case other people have the same issue and stumble upon this.
thx you saved my day :-)
Seems like the issue is back again. Thanks, solves the problem for me too.
If any of you can post a simple repro case showing the broken behavior here, I'd be happy to take a look at fixing it.
Took me a while to repro, but here you go: (ugly, but demonstrates the issue well)
Thanks. This is the same issue as . No fix currently, but using the key as a workaround is fine and I'll see if we can fix this sometime.
Thanks that was giving me fits!
If anyone is still seeing issues on 0.14, please make a new issue with a simple repro case.


Question: // For quickly matching children type, to test if can be treated as content. var CONTENT_TYPES = {'string': true, 'number': true}; <del> var DANGEROUSLY_SET_INNER_HTML = keyOf({dangerouslySetInnerHTML: null}); </del> var STYLE = keyOf({style: null}); /**

I have this issue, but can't reproduce in a simple example - my original code is layered and I think that's the reason the real DOM doesn't reconcile. In the react debugger is looks as dangerouslySetInnerHTML has proper __html value, but it doesn't equeal to the innerHTML of the actual element. I used an extremely simple (and equally nasty) workaround. Writing it here just in case it will help someone:
Reading out will rarely give you what you put in because the browser does various kinds of normalization on it. If you can repro with a standalone example though I'm happy to take a look.
well, that's more like a control shot :-)
Looks like the issue still exist in 16.4.1 when using on a tag, you cannot nest other or . issue is fixed by replacing the container with a
If you experience something similar three years later, and the original issue is closed, you can be sure it's a different unrelated issue. :-) Please file a new one. We don't keep track of closed issues so your feedback is unfortunately going into the void. When filing a new issue, please provide a reproducing example. when using dangerouslySetInnerHTML on a tag, you cannot nest other or This sounds like browsers work. You can't nest into . This is why React warns when you do it (except in which case React can't validate it).


Question: // Intentionally do not call componentDidUpdate() // because DOM refs are not available. } <del> _updateStateFromStaticLifecycle(props: Object) { if (this._element === null) { return; } const {type} = this._element; if (typeof type.getDerivedStateFromProps === 'function') { const oldState = this._newState || this._instance.state; const partialState = type.getDerivedStateFromProps.call( null, props, oldState, ); if (partialState != null) { const newState = Object.assign({}, oldState, partialState); this._instance.state = this._newState = newState; } } } </del> } let currentlyValidatingElement = null;


Question: String type ``` <ins> > Note: > > As of v0.12, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate. </ins> ## Supported Events

We currently support this, but it makes code less understandable and we'd like to stop supporting it and encourage people to use either e.preventDefault() or e.stopPropagation() as appropriate.
:+1: And then free up the event handler's return value for something else.
you mean? :)
Maybe =) Otherwise we can always use it to indicate something in a potential future event system.


Question: expect(console.warn.calls.length).toBe(0); }); <ins> it('should support injected wrapper components as DOM components', function() { var injectedDOMComponents = [ 'button', 'form', 'iframe', 'img', 'input', 'option', 'select', 'textarea', 'html', 'head', 'body' ]; injectedDOMComponents.forEach(function(type) { var component = ReactTestUtils.renderIntoDocument( React.createElement(type) ); expect(component.tagName).toBe(type.toUpperCase()); expect(ReactTestUtils.isDOMComponent(component)).toBe(true); }); }); </ins> });

I’ve tried to update from react 0.12.2 to 0.13.0 which caused several unit tests of my project to fail. I use react to render html on the server side, this includes the basic html structure like , and elements. All unit tests dealing with such elements are failing with react 0.13.0 but they worked fine with 0.12.2. Here is a minimal example : Running this with react 0.12.2, correctly logs the text content of the title:Running this with react 0.13.0 throws a TypeError
I think this is just a bug, not an intentional breaking change. Thanks for reporting.


Question: Next → {% endif %}

Should those comment sections exist? I'd rather people come to IRC. Their questions are often neglected at the bottom of a doc page.
:+1: for shutting down comments
+1
:+1:


Question: */ executeDispatch: function(event, listener, domID) { var returnValue = EventPluginUtils.executeDispatch(event, listener, domID); <ins> warning( typeof returnValue !== 'boolean', 'Returning `false` from an event handler is deprecated and will be ' + 'ignored in a future release. Instead, manually call ' + 'e.stopPropagation() or e.preventDefault(), as appropriate.' ); </ins> if (returnValue === false) { event.stopPropagation(); event.preventDefault();


Question: ON_CLICK_KEY, recordID.bind(null, getID(GRANDPARENT)) ); <ins> spyOn(console, 'warn'); </ins> ReactTestUtils.Simulate.click(CHILD); expect(idCallOrder.length).toBe(1); expect(idCallOrder[0]).toBe(getID(CHILD)); <ins> expect(console.warn.calls.length).toEqual(1); expect(console.warn.calls[0].args[0]).toBe( 'Warning: Returning `false` from an event handler is deprecated and ' + 'will be ignored in a future release. Instead, manually call ' + 'e.stopPropagation() or e.preventDefault(), as appropriate.' ); </ins> }); /**


Question: var MorphingComponent; var ChildUpdates; var React; <ins> var ReactComponent; </ins> var ReactCurrentOwner; var ReactPropTypes; var ReactTestUtils;

When unmounting components like this: a memory leak happens because ReactMount.getID(node) puts DOM nodes back to nodeCache if they are not there.. just right after they were purged from cache. Here is what's happing when unmounting that example component: label component gets purged from nodeCache when ReactDOMInput component is going to unmount it calls this method: which contains this.getDOMNode() which iterates through the children of the Form element calling getID() on each of them.. which puts these elements back into the cache. So first they were purged and here they are all put back in cache causing a memory leak :( I'm playing with React just 3rd day so not sure of a way to correctly fix this issue
(I took the liberty to edit your comment to add syntax highlighting)
I can't reproduce this. With this diff applied, I loaded http://127.0.0.1:8000/examples/ballmer-peak/ in the console and checked -- it was empty. Am I misunderstanding?
Yes. You've missed one more user defined component in there.. Here you go:
Thanks, fixed in .
Thank you for fast fix :)
Thanks for the find/fix!