Question: setRefreshHandler: __DEV__ ? setRefreshHandler : null, // Enables DevTools to append owner stacks to error messages in DEV mode. getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null, <ins> // Enables DevTools to detect reconciler version rather than renderer version // which may not match for third party renderers. reconcilerVersion: ReactVersion, </ins> }); }

This is a followup issue for pmndrs/react-three-fiber From my understanding of , the DevTools parse the version number advertised by the renderer in to select how to parse the internal fiber object. Unfortunately this means that third-party renderers that advertise a version lower than the equivalent React version for the release they are using get misclassified: for instance is using which is equivalent to , and since major version is much lower than it uses the default values for the enum which in turns lead to getting identified as and hook inspection being unavailable. A short term solution for renderers is to advertise a React-compatible version number, but ideally this is an implementation detail of the devtools that users of should not have to be aware of (also this means the version number displayed in the devtools is wrong). I'm not sure I'm familiar enough with the internals of the devtools to open a PR for this, but since the version parsing logic is used to detect features that are internal to anyway I guess a solution would be to have the Reconciler package add its own value for the constant along with the parameters sent to the devtools backend, and have the devtools use this string if its available over the renderer version.
Once and land (and get released) newer versions of the reconciler will inject its own version (to be used instead of the renderer version). Unfortunately this won't help you until you upgrade.


Question: frame.debugElementStack = []; } this.stack.push(frame); <ins> this.previousWasTextNode = false; </ins> return out; } }

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: /** * @private */ <ins> _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var 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; } } return renderedComponent; }, /** * @private */ </ins> _renderValidatedComponent: ReactPerf.measure( 'ReactCompositeComponent', '_renderValidatedComponent',

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: /** * @private */ <ins> _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var 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; } } return renderedComponent; }, /** * @private */ </ins> _renderValidatedComponent: ReactPerf.measure( 'ReactCompositeComponent', '_renderValidatedComponent',

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: /** * @private */ <ins> _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var 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; } } return renderedComponent; }, /** * @private */ </ins> _renderValidatedComponent: ReactPerf.measure( 'ReactCompositeComponent', '_renderValidatedComponent',

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: /** * @private */ <ins> _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var 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; } } return renderedComponent; }, /** * @private */ </ins> _renderValidatedComponent: ReactPerf.measure( 'ReactCompositeComponent', '_renderValidatedComponent',

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: httpEquiv: null, icon: null, id: MUST_USE_PROPERTY, <ins> keyParams: MUST_USE_ATTRIBUTE, keyType: MUST_USE_ATTRIBUTE, </ins> label: null, lang: null, list: MUST_USE_ATTRIBUTE,

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: findHostInstancesForRefresh, } from './ReactFiberHotReloading.old'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.old'; export {createPortal} from './ReactPortal'; export {


Question: }; }, <ins> createRenderer: function() { return new ReactShallowRenderer(); }, </ins> Simulate: null, SimulateNative: {} }; /** <ins> * @class ReactShallowRenderer */ var ReactShallowRenderer = function() { this._instance = null; }; ReactShallowRenderer.prototype.getRenderOutput = function() { return (this._instance && this._instance._renderedComponent) || null; }; var ShallowComponentWrapper = function(inst) { this._instance = inst; } assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.ShallowMixin ); ReactShallowRenderer.prototype.render = function(element) { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); this._render(element, transaction); ReactUpdates.ReactReconcileTransaction.release(transaction); }; ReactShallowRenderer.prototype._render = function(element, transaction) { if (!this._instance) { var rootID = ReactInstanceHandles.createReactRootID(); var instance = new ShallowComponentWrapper(new element.type(element.props)); instance.construct(element); instance.mountComponent(rootID, transaction, 0); this._instance = instance; } else { this._instance.receiveComponent(element, transaction); } }; /** </ins> * Exports: * * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`


Question: }; }, <ins> createRenderer: function() { return new ReactShallowRenderer(); }, </ins> Simulate: null, SimulateNative: {} }; /** <ins> * @class ReactShallowRenderer */ var ReactShallowRenderer = function() { this._instance = null; }; ReactShallowRenderer.prototype.getRenderOutput = function() { return (this._instance && this._instance._renderedComponent) || null; }; var ShallowComponentWrapper = function(inst) { this._instance = inst; } assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.ShallowMixin ); ReactShallowRenderer.prototype.render = function(element) { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); this._render(element, transaction); ReactUpdates.ReactReconcileTransaction.release(transaction); }; ReactShallowRenderer.prototype._render = function(element, transaction) { if (!this._instance) { var rootID = ReactInstanceHandles.createReactRootID(); var instance = new ShallowComponentWrapper(new element.type(element.props)); instance.construct(element); instance.mountComponent(rootID, transaction, 0); this._instance = instance; } else { this._instance.receiveComponent(element, transaction); } }; /** </ins> * Exports: * * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`


Question: }; }, <ins> createRenderer: function() { return new ReactShallowRenderer(); }, </ins> Simulate: null, SimulateNative: {} }; /** <ins> * @class ReactShallowRenderer */ var ReactShallowRenderer = function() { this._instance = null; }; ReactShallowRenderer.prototype.getRenderOutput = function() { return (this._instance && this._instance._renderedComponent) || null; }; var ShallowComponentWrapper = function(inst) { this._instance = inst; } assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.ShallowMixin ); ReactShallowRenderer.prototype.render = function(element) { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); this._render(element, transaction); ReactUpdates.ReactReconcileTransaction.release(transaction); }; ReactShallowRenderer.prototype._render = function(element, transaction) { if (!this._instance) { var rootID = ReactInstanceHandles.createReactRootID(); var instance = new ShallowComponentWrapper(new element.type(element.props)); instance.construct(element); instance.mountComponent(rootID, transaction, 0); this._instance = instance; } else { this._instance.receiveComponent(element, transaction); } }; /** </ins> * Exports: * * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`


Question: }; }, <ins> createRenderer: function() { return new ReactShallowRenderer(); }, </ins> Simulate: null, SimulateNative: {} }; /** <ins> * @class ReactShallowRenderer */ var ReactShallowRenderer = function() { this._instance = null; }; ReactShallowRenderer.prototype.getRenderOutput = function() { return (this._instance && this._instance._renderedComponent) || null; }; var ShallowComponentWrapper = function(inst) { this._instance = inst; } assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.ShallowMixin ); ReactShallowRenderer.prototype.render = function(element) { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); this._render(element, transaction); ReactUpdates.ReactReconcileTransaction.release(transaction); }; ReactShallowRenderer.prototype._render = function(element, transaction) { if (!this._instance) { var rootID = ReactInstanceHandles.createReactRootID(); var instance = new ShallowComponentWrapper(new element.type(element.props)); instance.construct(element); instance.mountComponent(rootID, transaction, 0); this._instance = instance; } else { this._instance.receiveComponent(element, transaction); } }; /** </ins> * Exports: * * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`


Question: if (consoleSettingsRef.appendComponentStack) { const lastArg = args.length > 0 ? args[args.length - 1] : null; const alreadyHasComponentStack = <del> lastArg !== null && isStringComponentStack(lastArg); </del> <ins> typeof lastArg === 'string' && isStringComponentStack(lastArg); </ins> // If we are ever called with a string that already has a component stack, // e.g. a React error/warning, don't append a second stack.

<!-- 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: "scriptPreprocessor": "scripts/jest/preprocessor.js", "setupEnvScriptFile": "scripts/jest/environment.js", "setupTestFrameworkScriptFile": "scripts/jest/test-framework-setup.js", <ins> "testRunner": "jasmine1", </ins> "testFileExtensions": [ "coffee", "js",

Looks like is broken on a fresh checkout. Just doing a and locally results in running jasmine1, but running the same commands on a fresh checkout attempts to run jasmine2 and results in 300+ failing unit tests.


Question: HTML to JSX Compiler

! Edits were made last week to this page, maybe it was broken accidentally?
I guess you use https, but the page loads a script over http and that gets blocked. I made a pull request to fix this . I couldn't test it, so fingers crossed that it is right.
I though we were going to remove this page and let this live entirely in the react-magic repo?
The scripts live in the react-magic repo, but I think we'll keep the page on the React site as it's still really useful there.


Question: }); describe('act', () => { <del> it('works', () => { </del> <ins> it('can use .act() to batch updates and effects', () => { </ins> function App(props) { React.useEffect(() => { props.callback();

<!-- 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: Get Started Download React v{{site.react_version}}   Get Started Download React v{{site.react_version}}

<!-- 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: 16.x <!-- 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: Nothing. It's part of WAI-ARIA 1.3
I guess the question is what React considers a "valid" aria prop: specific version (range) of Aria version with a (WR,CR,PR,REC) spec editors consider the aria prop that ever existed
Yeah, it seems they've support for this fairly recently.
We might also ask: “Why is react telling me what is and isn’t a valid aria attribute.” React isn’t the source of truth for that information. It sounds like the job of a linter rather than something react should warn about.
I think it might be from a compiler.
It's from here:
We might also ask: “Why is react telling me what is and isn’t a valid aria attribute.” The reason is that they're often misspelled so on the whole it's beneficial to warn for unknown ones. I'll merge the PR.
Fixed by Will appear in 18.


Question: Get Started Download React v{{site.react_version}}   Get Started Download React v{{site.react_version}}

Not sure if this is intentional, but if I run this: The resulting inner div has its set to . the resulting DOM string is: but if I remove the key the result is: If is used as the key, the result is the latter above.
This is intentional. is an intentional value whereas is the lack of a specified value.
If that's the case then IMHO we should escape it properly, as it is now and are treated equally by React (this should be trivial by translating it to or whatever. Although personally I'm not sure when it ever makes sense to have as a key, how about a warning too?


Question: }); }); <ins> it('should call componentWillUnmount before unmounting', function() { var container = document.createElement('div'); var innerUnmounted = false; spyOn(ReactMount, 'purgeID').andCallThrough(); var Component = React.createClass({ render: function() { return <div> <Inner /> </div>; } }); var Inner = React.createClass({ componentWillUnmount: function() { // It's important that ReactMount.purgeID be called after any component // lifecycle methods, because a componentWillMount implementation is // likely call this.getDOMNode(), which will repopulate the node cache // after it's been cleared, causing a memory leak. expect(ReactMount.purgeID.callCount).toBe(0); innerUnmounted = true; }, render: function() { return <div />; } }); React.renderComponent(<Component />, container); React.unmountComponentAtNode(container); expect(innerUnmounted).toBe(true); // <Component />, <Inner />, and both <div /> elements each call // unmountIDFromEnvironment which calls purgeID, for a total of 4. expect(ReactMount.purgeID.callCount).toBe(4); }); </ins> it('should detect valid CompositeComponent classes', function() { var Component = React.createClass({ render: function() {

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!


Question: jsxScripts.push(scripts.item(i)); } } console.warn("You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"); jsxScripts.forEach(function(script) {

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: function getJSReport(browser){ return browser <del> .waitForCondition("typeof window.jasmine != 'undefined'", 5e3) </del> <ins> .waitFor(wd.asserters.jsCondition("typeof window.jasmine != 'undefined'"), 5e3, 50) </ins> .fail(function(error){ throw Error("The test page didn't load properly. " + error); }) <del> .waitForCondition("typeof window.jasmine.getJSReport != 'undefined'", 10e3) .waitForCondition("window.postDataToURL.running <= 0", 30e3) </del> <ins> .waitFor(wd.asserters.jsCondition("typeof window.jasmine.getJSReport != 'undefined'"), 60e3, 100) .waitFor(wd.asserters.jsCondition("window.postDataToURL.running <= 0"), 30e3, 500) </ins> .eval("jasmine.getJSReport().passed"); }

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


Question: var elementFactory = ReactElement.createFactory(tag); var FullPageComponent = ReactClass.createClass({ <ins> tagName: tag.toUpperCase(), </ins> displayName: 'ReactFullPageComponent' + tag, componentWillUnmount: function() {

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: expect(idCallOrder[0]).toBe(getID(CHILD)); }); <del> it('should stopPropagation if false is returned', function() { </del> <ins> it('should stopPropagation if false is returned, but warn', function() { </ins> ReactBrowserEventEmitter.putListener( getID(CHILD), ON_CLICK_KEY,

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: <ReallyLongErrorMessageThatWillCauseTextToBeTruncated /> <DuplicateWarningsAndErrors /> <MultipleWarningsAndErrors /> <ins> <ComponentWithSymbolWarning /> </ins> </Fragment> ); }


Question: if (!styles.hasOwnProperty(styleName)) { continue; } <ins> var styleValue = styles[styleName]; </ins> if (__DEV__) { <del> if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } else if (badVendoredStyleNamePattern.test(styleName)) { warnBadVendoredStyleName(styleName); } </del> <ins> warnValidStyle(styleName, styleValue); </ins> } <del> var styleValue = styles[styleName]; </del> if (styleValue != null) { serialized += processStyleName(styleName) + ':'; serialized += dangerousStyleValue(styleName, styleValue) + ';';

On the first render it works, but then the update silently fails. Expected would be the semicolon being removed, or an error/warning in the development build. Tested on Chrome latest, Firefox latest, with 0.12.1 and master. Minimal: ran into (on IRC).
My first instinct is to put a warning in DEV so we don't incur any costs in prod. This would be similar to our other style key warning ("you used background-color but probably meant backgroundColor" or whatever it is we say).
sounds reasonable, I don't think there's any valid reason to have a semicolon there.
It's only a warning, but it's worth considering that is valid CSS IIRC.
so that wouldn't warn :)
Oh right :), but I've seen plenty of invalid , but perhaps that's an exercise for some other time. Anyway, you might want to ignore white-space after the as well.
I'm working on this issue. I've a warning, but thinking that it may be a good idea to trim any semicolons as well. The warning will serve to let developers know it's invalid syntax, but try and fix the problem while we're at it.


Question: } `, }, <ins> { code: normalizeIndent` export const notAComponent = () => { return () => { useState(); } } `, // TODO: this should error but doesn't. // errors: [functionError('use', 'notAComponent')], }, { code: normalizeIndent` export default () => { if (isVal) { useState(0); } } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, { code: normalizeIndent` function notAComponent() { return new Promise.then(() => { useState(); }); } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, </ins> ], invalid: [ {

React version: "eslint-plugin-react-hooks": "^4.2.0" Link to code example: (eslint-plugin-react-hooks) did not fire when it is inside of a Promise block. Please find the detailed explanation in example code below. thx
How do you use hooks inside promises? Hooks should only be called in the body of components
that is right, but I was not aware of it when I code it. And I think should have caught the error. Can you update the code for to make sure the bug won't fall through the crack? To be specific, the hook I was trying to access inside of promise is , which is about injecting the relay environment to handle the GraphQL query/mutation. Because Eslint did not capture this issue, I merged the bug into production until users complained...
This is described in the documentation and any tutorials. I'm not the maintainer of react, but it seems to me that the plugin should not check such things.
I think this issue is actually the anon function, which is reported here: Leaving this open to confirm fixing anon function fixes this.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!


Question: } `, }, <ins> { code: normalizeIndent` export const notAComponent = () => { return () => { useState(); } } `, // TODO: this should error but doesn't. // errors: [functionError('use', 'notAComponent')], }, { code: normalizeIndent` export default () => { if (isVal) { useState(0); } } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, { code: normalizeIndent` function notAComponent() { return new Promise.then(() => { useState(); }); } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, </ins> ], invalid: [ {

React version: 17.0.2 React-refresh version: 0.10.0 This issue is similar to , but ignores default exported unnamed functions instead. As a code comment suggests, this is a known limitation: Would a fix be considered? Given the following files, making changes to doesn't trigger a re-render. module: module: Making changes to does not re-render the element in . The transformed module does not register the for refresh. Making changes to does re-render the element in .
This is intentional — even if we fix this case, we need some heuristic for other tools like lint rules. Why are you using this style? Functions should have names so that you get them in stack traces and so on.
Indeed, but then it becomes confusing: If there's no way around, this can be closed and I'll make a suggestion downstream to use The code comment mentioned above should then also be more explicit, replacing "currently" by "intentionally".
However, given that an ignored component prevents a refresh (), I haven't figured out yet whether this is an issue with itself or with . AFAIK, a code update of an ignored component should still trigger a refresh.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!


Question: findHostInstancesForRefresh, } from './ReactFiberHotReloading.new'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.new'; export {createPortal} from './ReactPortal'; export {

This is a followup issue for pmndrs/react-three-fiber From my understanding of , the DevTools parse the version number advertised by the renderer in to select how to parse the internal fiber object. Unfortunately this means that third-party renderers that advertise a version lower than the equivalent React version for the release they are using get misclassified: for instance is using which is equivalent to , and since major version is much lower than it uses the default values for the enum which in turns lead to getting identified as and hook inspection being unavailable. A short term solution for renderers is to advertise a React-compatible version number, but ideally this is an implementation detail of the devtools that users of should not have to be aware of (also this means the version number displayed in the devtools is wrong). I'm not sure I'm familiar enough with the internals of the devtools to open a PR for this, but since the version parsing logic is used to detect features that are internal to anyway I guess a solution would be to have the Reconciler package add its own value for the constant along with the parameters sent to the devtools backend, and have the devtools use this string if its available over the renderer version.
Once and land (and get released) newer versions of the reconciler will inject its own version (to be used instead of the renderer version). Unfortunately this won't help you until you upgrade.


Question: onMouseMove onMouseOut onMouseOver onMouseUp ``` <del> Properties: </del> <ins> Properties: </ins> ```javascript boolean altKey


Question: } var frame = this.stack[this.stack.length - 1]; if (frame.childIndex >= frame.children.length) { <del> out += frame.footer; this.previousWasTextNode = false; </del> <ins> var footer = frame.footer; out += footer; if (footer !== '') { this.previousWasTextNode = false; } </ins> this.stack.pop(); if (frame.tag === 'select') { this.currentSelectValue = null;

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: this._instance.context = context; this._instance.props = props; this._instance.state = state; <ins> this._newState = null; </ins> if (shouldUpdate) { this._rendered = this._instance.render();

<!-- 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: // 'msTransform' is correct, but the other prefixes should be capitalized var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; <ins> // style values shouldn't contain a semicolon var badStyleValueWithSemicolonPattern = /;s*$/; </ins> var warnedStyleNames = {}; <ins> var warnedStyleValues = {}; </ins> var warnHyphenatedStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {


Question: through2 "^2.0.0" fbjs@^0.8.9: <del> version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" </del> <ins> version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" </ins> dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1"

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: through2 "^2.0.0" fbjs@^0.8.9: <del> version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" </del> <ins> version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" </ins> dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1"

[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:
it("should empty element when removing innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(

  ); expect(stub.getDOMNode().innerHTML).toEqual(':)');

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:
it("should empty element when removing innerHTML", function() { var stub = ReactTestUtils.renderIntoDocument(

  ); expect(stub.getDOMNode().innerHTML).toEqual(':)');

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:
expect(result).toEqual(
value:1
); });  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => { 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 shallowRenderer = createRenderer(); const initialResult = shallowRenderer.render( <SimpleComponent value="initial" />, ); expect(initialResult).toEqual(
value:initial
); const updatedResult = shallowRenderer.render( <SimpleComponent value="updated" />, ); expect(updatedResult).toEqual(
value:updated
); });  it('can setState with an updater function', () => { let instance;


Question: /** * Same as the default implementation, except cancels the event when return <del> * value is false. </del> <ins> * value is false. This behavior will be disabled in a future release. </ins> * * @param {object} Event to be dispatched. * @param {function} Application-level callback.


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: name.charAt(0).toUpperCase() + name.slice(1) + '?' ); }; <ins> var warnStyleValueWithSemicolon = function(name, value) { if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { return; } warnedStyleValues[value] = true; warning( false, 'Style property values shouldn't contain a semicolon. ' + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, '') ); }; /** * @param {string} name * @param {*} value */ var warnValidStyle = function(name, value) { if (name.indexOf('-') > -1) { warnHyphenatedStyleName(name); } else if (badVendoredStyleNamePattern.test(name)) { warnBadVendoredStyleName(name); } else if (badStyleValueWithSemicolonPattern.test(value)) { warnStyleValueWithSemicolon(name, value); } }; </ins> } /**


Question: expect(called).toBe(true); }); <ins> it('warns and throws if you use TestUtils.act instead of TestRenderer.act in node', () => { // we warn when you try to load 2 renderers in the same 'scope' // so as suggested, we call resetModules() to carry on with the test jest.resetModules(); const {act} = require('react-dom/test-utils'); expect(() => { expect(() => act(() => {})).toThrow('document is not defined'); }).toWarnDev( [ 'It looks like you called TestUtils.act(...) in a non-browser environment', ], {withoutStack: 1}, ); }); </ins> }); });

<!-- 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: <ins> ## 4.0.0 * **New Violations:** Consider `PascalCase.useFoo()` calls as Hooks. ([@cyan33](https://github.com/cyan33) in [#18722](https://github.com/facebook/react/pull/18722)) * **New Violations:** Check callback body when it's not written inline. ([@gaearon](https://github.com/gaearon) in [#18435](https://github.com/facebook/react/pull/18435)) * Add a way to enable the dangerous autofix. ([@gaearon](https://github.com/gaearon) in [#18437](https://github.com/facebook/react/pull/18437)) * Offer a more sensible suggestion when encountering an assignment. ([@Zzzen](https://github.com/Zzzen) in [#16784](https://github.com/facebook/react/pull/16784)) * Consider TypeScript casts of `useRef` as constant. ([@sophiebits](https://github.com/sophiebits) in [#18496](https://github.com/facebook/react/pull/18496)) * Add documentation. ([@ghmcadams](https://github.com/ghmcadams) in [#16607](https://github.com/facebook/react/pull/16607)) ## 3.0.0 * **New Violations:** Forbid calling Hooks from classes. ([@ianobermiller](https://github.com/ianobermiller) in [#18341](https://github.com/facebook/react/pull/18341)) * Add a recommended config. ([@SimenB](https://github.com/SimenB) in [#14762](https://github.com/facebook/react/pull/14762)) ## 2.5.0 * Fix a misleading error message in loops. ([@M-Izadmehr](https://github.com/M-Izadmehr) in [#16853](https://github.com/facebook/react/pull/16853)) ## 2.4.0 * **New Violations:** Run checks for functions passed to `forwardRef`. ([@dprgarner](https://github.com/dprgarner) in [#17255](https://github.com/facebook/react/pull/17255)) * **New Violations:** Check for ref usage in any Hook containing the word `Effect`. ([@gaearon](https://github.com/gaearon) in [#17663](https://github.com/facebook/react/pull/17663)) * Disable dangerous autofix and use ESLint Suggestions API instead. ([@wdoug](https://github.com/wdoug) in [#17385](https://github.com/facebook/react/pull/17385)) ## 2.0.0 * **New Violations:** Forbid calling Hooks at the top level. ([@gaearon](https://github.com/gaearon) in [#16455](https://github.com/facebook/react/pull/16455)) * Fix a crash when referencing arguments in arrow functions. ([@hristo-kanchev](https://github.com/hristo-kanchev) in [#16356](https://github.com/facebook/react/pull/16356)) ## 1.x The 1.x releases aren’t noted in this changelog, but you can find them in the [commit history](https://github.com/facebook/react/commits/master/packages/eslint-plugin-react-hooks). </ins>

<!-- 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: eslint-plugin-react-hooks to Releases on GitHub there about eslint-plugin-react-hooks to look for a CHANGELOG for eslint-plugin-react-hooks CHANGELOG <!-- 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: Not code related. <!-- 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: --No change logs. Change logs on the Releases page for eslint-plugin-react-hooks or a separate CHANGELOG. Especially for major version changes so developers are aware of breaking changes that need to be fixed/prioritised. Thank you.
Please feel free to help out filling that in. Thanks!
Thanks. I tried searching for an existing issue but couldn't find one so I thought I'd mention it. I've gone through the commit history (standard process without release notes) but without existing knowledge of the codebase, it's a bit hard to understand what changes affect the user and how. So I'll leave someone more in-the-know to write it. :bowing_man:


Question: }); }); <ins> describe('comparing jsx vs .createFactory() vs .createElement()', function() { var Child, mocks; beforeEach(function() { require('mock-modules').dumpCache(); mocks = require('mocks'); React = require('React'); ReactDOM = require('ReactDOM'); ReactTestUtils = require('ReactTestUtils'); var metaData = mocks.getMetadata(React.createClass({ render: function() { return React.createElement('div'); }, })); Child = mocks.generateFromMetadata(metaData); }); describe('when using jsx only', function() { var Parent, instance; beforeEach(function() { Parent = React.createClass({ render: function() { return ( <div> <Child ref="child" foo="foo value">children value</Child> </div> ); }, }); instance = ReactTestUtils.renderIntoDocument(<Parent/>); }); it('should scry children but cannot', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); describe('when using parent that uses .createFactory()', function() { var factory, instance; beforeEach(function() { var childFactory = React.createFactory(Child); var Parent = React.createClass({ render: function() { return React.DOM.div({}, childFactory({ ref: 'child', foo: 'foo value' }, 'children value')); }, }); factory = React.createFactory(Parent); instance = ReactTestUtils.renderIntoDocument(factory()); }); it('can properly scry children', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); describe('when using parent that uses .createElement()', function() { var factory, instance; beforeEach(function() { var Parent = React.createClass({ render: function() { return React.DOM.div({}, React.createElement(Child, { ref: 'child', foo: 'foo value' }, 'children value')); }, }); factory = React.createFactory(Parent); instance = ReactTestUtils.renderIntoDocument(factory()); }); it('should scry children but cannot', function() { var children = ReactTestUtils.scryRenderedComponentsWithType(instance, Child); expect(children.length).toBe(1); }); it('does not maintain refs', function() { expect(instance.refs.child).not.toBeUndefined(); }); it('can capture Child instantiation calls', function() { expect(Child.mock.calls[0][0]).toEqual({ foo: 'foo value', children: 'children value' }); }); }); }); </ins>

I've created a repo to help illustrate what I'm running into: Basically, developing in pure jsx and using the React.createFactory() are not interchangeable under testing using jest. This makes writing unit tests a little trickier. According to this link: , non-jsx components must be wrapped in a React.createFactory(). But, when testing these components using Jest, I've found that these are not interchangeable within tests that mock sub-modules. I'm guessing that the differences stem from using .bind() within React.createFactory:
updated the aforementioned repo with some possible workarounds. hopefully it saves someone else some time. perhaps the documentation can be expanded with an example.
cc
First of all, thank you for an excellent bug report. Very well structured and easy to test. The bad news is that the various wrappers and undoing of wrappers is very complex. It was difficult to get 0.12 into a form where it was a perfect upgrade path. I guess this is a special case where something broke down. I ended up spending a lot of time on this so I'm inclined to just leave 0.12 as broken. :/ The good news is that this works in the master branch so this will be fixed in 0.13. Would you mind submitting a formal pull request with these unit tests to our tests to ensure that it doesn't break again? The exception is asserting on props on mockComponent. We probably won't support that. is considered legacy at this point. It shouldn't be as important in 0.13, since auto-mocked components works better out-of-the-box. We'll probably encourage shallow testing for this use case.
i'll do my best to get the tests into a PR for your test suite. But, fighting some fires at the moment, so I can't promise a drop date. Thanks for looking into it.
Closing as very outdated.


Question: var invariant = require('invariant'); var keyOf = require('keyOf'); <ins> var warning = require('warning'); </ins> var topLevelTypes = EventConstants.topLevelTypes;


Question: > lightweight description of what the DOM should look like. We call this process **reconciliation**. Check out <del> [this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of </del> <ins> [this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of </ins> reconciliation in action. Because this re-render is so fast (around 1ms for TodoMVC), the developer

Do you want to request a feature or report a bug? bug What is the current behavior? does not work, the code is not executed, there are two files loaded from the Facebook servers but they both return a 5xx error If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via or similar (template: ). Go to and then click the link at the bottom to go to and then click on the link to jsfiddle in the text What is the expected behavior? that there is some generated output in the result pane Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Chrome (latest stable, Mac OS), Safari (Mac OS)
That’s a pretty old blogpost. I’m not sure why the integration broke, but I recommend to look at more modern examples (e.g. is up to date).
Well, this blogpost is still linked at the bottom here: So this is how I came there. By reading the guide and I thought I would get an uptodate guide with uptodate links ;-)
Fixed now. The new link is It will appear in the blog post the next time we sync our docs. Thanks!
Great. Thanks too.


Question: this._defaultProps = null; <del> ReactComponent.Mixin.unmountComponent.call(this); </del> this._renderedComponent.unmountComponent(); this._renderedComponent = null; <ins> ReactComponent.Mixin.unmountComponent.call(this); </ins> if (this.refs) { this.refs = null; }

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!


Question: * **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state. * **React components:** Build them in `render()` based on underlying props and state. <del> * **Duplicated data from props:** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values. </del> <ins> * **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it's previous values, because props can change over time. </ins>

At the end, there is a confusing explanation about "Duplicated data from props" in the section "What Shouldn’t Go in State?": Perhaps what is trying to be said is something like:
Ah, perhaps what they're really referring to is basically "edit pages", where you might want to diff the before and after, so that you can send only the changed variables. But it really reads quite weirdly, especially for beginners.
This change is needed. I'm new to React and just did a Google search on that part of the documentation for clarification and it came up with this page. I'm guessing that what you've interpreted it to mean is correct, as it makes sense that way.


Question: ``` onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave <del> onMouseMove onMouseUp </del> <ins> onMouseMove onMouseOut onMouseOver onMouseUp </ins> ``` Properties:

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: ``` onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave <del> onMouseMove onMouseUp </del> <ins> onMouseMove onMouseOut onMouseOver onMouseUp </ins> ``` Properties:

(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: 'n    in Child (at **)n    in Intermediate (at **)n    in Parent (at **)', ); }); <ins> it('should correctly log Symbols', () => { const Component = ({children}) => { fakeConsole.warn('Symbol:', Symbol('')); return null; }; act(() => ReactDOM.render(<Component />, document.createElement('div'))); expect(mockWarn).toHaveBeenCalledTimes(1); expect(mockWarn.mock.calls[0][0]).toBe('Symbol:'); }); </ins> });

<!-- 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: // Relies on `updateStylesByID` not mutating `styleUpdates`. styleUpdates = nextProp; } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { var lastHtml = lastProp && lastProp.__html; var nextHtml = nextProp && nextProp.__html; if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextProp ); } </del> } else if (registrationNames[propKey]) { putListener(this._rootNodeID, propKey, nextProp); } else if (


Question: // Relies on `updateStylesByID` not mutating `styleUpdates`. styleUpdates = nextProp; } <del> } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { var lastHtml = lastProp && lastProp.__html; var nextHtml = nextProp && nextProp.__html; if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextProp ); } </del> } else if (registrationNames[propKey]) { putListener(this._rootNodeID, propKey, nextProp); } else if (


Question: runScripts = function() { var scripts = document.getElementsByTagName('script'); // Array.prototype.slice cannot be used on NodeList on IE8 var jsxScripts = []; for (var i = 0; i < scripts.length; i++) {

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: For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag. <ins> > Note: > > We included jQuery here because we want to simplify the code of our future ajax calls, but it's **NOT** mandatory for React to work. </ins> ### Your first component React is all about modular, composable components. For our comment box example, we'll have the following component structure:

This may be controversial, but after browsing StackOverflow I believe there's way too many people that load jQuery when they really don't need it. Let's not add to that. I don't think we should be loading jQuery in the tutorial just to do an AJAX request. Let's instead have a dummy object that just returns a static list. Which could simply be replaced to implement AJAX loading. Old post (before I thought of just using static data): Let's replace it with standard XMLHttpRequest code and say something like "Here's some simple code for doing an AJAX request, alternatively you could use your favourite framework like jQuery, MooTools, YUI, ... instead". Having jQuery loaded in the tutorial may make people think that jQuery is necessary to use React.
I was thinking about this more and using a static list would probably be better than AJAX (given the tutorial just AJAX loads a static file). Updated the description to reflect this.
I think that would be fine. I would still put the equivalent jQuery call because that will be the inevitable question.
After reading pretty much everything related to this issue, I think it would be a good idea to add (for now) a little note in the tutorial, just under the code snippet having the jQuery inclusion. I think it's the only place it really needs to be. What do you think ? (So we can finally close this issue)
Agreed. A beginner tutorial isn't the place to debate jquery vs no jquery. The point is familiarity.
For what it's worth, I removed the use of jQuery in the ReactJS.NET version of the tutorial:
^ The note about jQuery not being mandatory got merged. I think this is good for now for newcomers. The react users probably already realized they don't actually need jQuery. Closing for now! =)
It dose not look very good when you are introducing new people to React and the first ting in the tutorial is: "We need to do some Ajax calls, let's just add jQuery".


Question: }, /** <del> * Updates a DOM node's innerHTML set by `props.dangerouslySetInnerHTML`. </del> <ins> * Updates a DOM node's innerHTML. </ins> * * @param {string} id ID of the node to update. <del> * @param {object} html An HTML object with the `__html` property. </del> <ins> * @param {string} html An HTML string. </ins> * @internal */ updateInnerHTMLByID: function(id, html) { var node = ReactMount.getNode(id); // HACK: IE8- normalize whitespace in innerHTML, removing leading spaces. // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html <del> node.innerHTML = (html && html.__html || '').replace(/^ /g, ' '); </del> <ins> node.innerHTML = html.replace(LEADING_SPACE, ' '); </ins> }, /**


Question: }, /** <del> * Updates a DOM node's innerHTML set by `props.dangerouslySetInnerHTML`. </del> <ins> * Updates a DOM node's innerHTML. </ins> * * @param {string} id ID of the node to update. <del> * @param {object} html An HTML object with the `__html` property. </del> <ins> * @param {string} html An HTML string. </ins> * @internal */ updateInnerHTMLByID: function(id, html) { var node = ReactMount.getNode(id); // HACK: IE8- normalize whitespace in innerHTML, removing leading spaces. // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html <del> node.innerHTML = (html && html.__html || '').replace(/^ /g, ' '); </del> <ins> node.innerHTML = html.replace(LEADING_SPACE, ' '); </ins> }, /**


Question: 'use strict'; <ins> var path = require("path"); </ins> var grunt = require("grunt"); var expand = grunt.file.expand; var spawn = grunt.util.spawn;

H:githubreactgrunt Running "delete-build-modules" task Running "jsx:normal" (jsx) task Warning: This socket is closed. Use --force to continue. Aborted due to warnings. on windows. any hint?
The issue arises in the jsx task at line 42: File: [no files] Warning: This socket is closed. Use --force to continue. Error: This socket is closed. at () at doWrite () at writeOrBuffer () at () at () at (c:reactgrunttasks) at Object.<anonymous(c:reactnodemodulesgruntlibgrunt) at (c:reactnodemodulesgruntlibgrunt) at Object.<anonymous(c:reactnodemodulesgruntlibutil) at Task.runTaskFn (c:reactnode_modulesgruntlibutil) var child = spawn({ cmd: "bin/jsx-internal", args: args }, function(error, result, code) { if (error) { (error); done(false); } else { done(); } }); (JSON.stringify(config.getConfig())); So, looks like the spawn child's input stream is not available. Running node bin/jsx-internal" works however, get a message saying "Warning: still waiting for STDIN after 1000ms"
- can you take a look?
I was able to work around this by changing the following in grunttasks to Obviously this change is Windows-only but does provide a possible workaround.
What about changing it to
Yes, I can verify that worked on my machine. Sorry, I used some leftover code for executing batch files which requires going through cmd.
Cool, I can put up a PR for that (unless you have the time,
Sure, I can do that. Thanks for the help!


Question: continue; } if (__DEV__) { <del> if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } else if (badVendoredStyleNamePattern.test(styleName)) { warnBadVendoredStyleName(styleName); } </del> <ins> warnValidStyle(styleName, styles[styleName]); </ins> } var styleValue = dangerousStyleValue(styleName, styles[styleName]); if (styleName === 'float') {

On the first render it works, but then the update silently fails. Expected would be the semicolon being removed, or an error/warning in the development build. Tested on Chrome latest, Firefox latest, with 0.12.1 and master. Minimal: ran into (on IRC).
My first instinct is to put a warning in DEV so we don't incur any costs in prod. This would be similar to our other style key warning ("you used background-color but probably meant backgroundColor" or whatever it is we say).
sounds reasonable, I don't think there's any valid reason to have a semicolon there.
It's only a warning, but it's worth considering that is valid CSS IIRC.
so that wouldn't warn :)
Oh right :), but I've seen plenty of invalid , but perhaps that's an exercise for some other time. Anyway, you might want to ignore white-space after the as well.
I'm working on this issue. I've a warning, but thinking that it may be a good idea to trim any semicolons as well. The warning will serve to let developers know it's invalid syntax, but try and fix the problem while we're at it.


Question: topKeyUp:       eventTypes.keyUp, topMouseDown:   eventTypes.mouseDown, topMouseMove:   eventTypes.mouseMove, <ins> topMouseOut:    eventTypes.mouseOut, topMouseOver:   eventTypes.mouseOver, </ins> topMouseUp:     eventTypes.mouseUp, topPaste:       eventTypes.paste, topScroll:      eventTypes.scroll,


Question: topKeyUp:       eventTypes.keyUp, topMouseDown:   eventTypes.mouseDown, topMouseMove:   eventTypes.mouseMove, <ins> topMouseOut:    eventTypes.mouseOut, topMouseOver:   eventTypes.mouseOver, </ins> topMouseUp:     eventTypes.mouseUp, topPaste:       eventTypes.paste, topScroll:      eventTypes.scroll,


Question: captured: keyOf({onMouseMoveCapture: true}) } }, <ins> mouseOut: { phasedRegistrationNames: { bubbled: keyOf({onMouseOut: true}), captured: keyOf({onMouseOutCapture: true}) } }, mouseOver: { phasedRegistrationNames: { bubbled: keyOf({onMouseOver: true}), captured: keyOf({onMouseOverCapture: true}) } }, </ins> mouseUp: { phasedRegistrationNames: { bubbled: keyOf({onMouseUp: true}),


Question: captured: keyOf({onMouseMoveCapture: true}) } }, <ins> mouseOut: { phasedRegistrationNames: { bubbled: keyOf({onMouseOut: true}), captured: keyOf({onMouseOutCapture: true}) } }, mouseOver: { phasedRegistrationNames: { bubbled: keyOf({onMouseOver: true}), captured: keyOf({onMouseOverCapture: true}) } }, </ins> mouseUp: { phasedRegistrationNames: { bubbled: keyOf({onMouseUp: true}),


Question: */ var textContentAccessor = getTextContentAccessor() || 'NA'; <ins> var LEADING_SPACE = /^ /; </ins> /** * Operations used to process updates to DOM nodes. This is made injectable via * `ReactComponent.DOMIDOperations`.


Question: */ var textContentAccessor = getTextContentAccessor() || 'NA'; <ins> var LEADING_SPACE = /^ /; </ins> /** * Operations used to process updates to DOM nodes. This is made injectable via * `ReactComponent.DOMIDOperations`.


Question: args.push("--config" /* from stdin */); var child = spawn({ <del> cmd: "bin/jsx-internal", args: args </del> <ins> cmd: "node", args: [path.join("bin", "jsx-internal")].concat(args) </ins> }, function(error, result, code) { if (error) { grunt.log.error(error);


Question: expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform'); }); <ins> it('should warn about style having a trailing semicolon', function() { spyOn(console, 'warn'); CSSPropertyOperations.createMarkupForStyles({ fontFamily: 'Helvetica, arial', backgroundImage: 'url(foo;bar)', backgroundColor: 'blue;', color: 'red;   ' }); expect(console.warn.callCount).toBe(2); expect(console.warn.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead'); expect(console.warn.argsForCall[1][0]).toContain('Try "color: red" instead'); }); </ins> });