jiebi/CodeConvo huggingface dataset:
Change:
styleProp.hasOwnProperty('display') ? styleProp.display : null; <del> // $FlowFixMe Setting a style property to null is the valid way to reset it. instance.style.display = display; </del> <ins> instance.style.display = dangerousStyleValue('display', display); </ins> } export function unhideTextInstance(

Discussion:
Do you want to request a feature or report a bug? Bug What is the current behavior? Suspense adds display: none to all top level child elements in IE11. 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: Code sandbox can't render in IE11 either, but in this example I would expect to not see IE11 because the div would have display: none on it. What is the expected behavior? To be visible and not have display: none on the children. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I had to revert back to react-loadable to fix this.
Is it IE11 specific or a general bug? There’s a few general bugs we’re tracking right now.
IE specific, it worked on Chrome/Safari, but in IE11 the display: none; was left on all the child components. I was able to go and check that style off in the inspector and see the components were loaded just fine.
If I take your CodeSandbox, add react-app-polyfill/ie9 and edit the to compile for IE11 support: – then download that, build it locally, and deploy to at https://build-, then I get a page that successfully displays "hello world" when opened in IE11. !
Can you confirm if I'm doing anything different from what you tested?
Hmm I was hoping it would be as simple as that. But I guess it is more complicated. I'm using it with the router for lazyloading router components. Here is my file that was working everywhere except for IE.
Oh, I think I found the bug.
I love GitHub issues/prs. I can easily track the problem, what caused it, and how to fix it! I was looking for a fix and had one! Thank you!
any ideas when this fix might make it into a release?
PS: We love the work you do for us all!
Any updates to this?
can be fixed with polyfills. It´s described in this pull request
Thanks everyone for this.

The issue itself has been fixed (I think in 16.7).
I'm noticing this problem with react version Suspense/fallback adds a style and this doesn't get removed on IE 11. Works fine on Chrome though.
Change:
expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({target: node})); }); <ins> it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return ( <div onClick={this.props.handleClick}> hello, world. </div> ); }, }); var handler = jasmine.createSpy('spy'); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent handleClick={handler} />); var result = shallowRenderer.getRenderOutput(); expect(() => ReactTestUtils.Simulate.click(result)).toThrow( 'TestUtils.Simulate expects a component instance and not a ReactElement.' + 'TestUtils.Simulate will not work if you are using shallow rendering.' ); expect(handler).not.toHaveBeenCalled(); }); </ins> it('can scry with stateless components involved', function() { var Stateless = () => <div><hr /></div>; var SomeComponent = React.createClass({

Discussion:
I'm doing a simple shallow render on a component which has a button () with an handler. I can correctly assert most of its properties, but I can't get asserting whether the button has been clicked (by using and a passed in as handler) to work. TestUtils doesn't throw any Invariant Violation or whatever other error, the spy just never gets called. When I manually call it through it works. Is this expected behavior?
I'm not up to date with what the interaction is supposed to be with the shallow renderer these days so cc … But when you use the shallow renderer you aren't working on a real rendered tree. especially doesn't look like it should work - remember that props are not rendered output. will be a React Element, not a component instance. So as your test case seems to be written, yes this is expected.
That's expected. We should probably give a better error message – changing this issue title to reflect that.
Is there anything I can do to help with this? I haven't contributed to React yet, but we're investing heavily into in-company knowledge. If you can point me to where to assert this, I'd love to help.
Also, where do I submit PR's for React's website? I could clarify this in the documentation...
The docs/ directory has markdown files that turn into the website. Each page should also have an "Edit on GitHub" button at the top that links you straight to it. In the file, you could add an invariant that makes sure React.isValidElement returns false on the passed-in node.
Change:
var cloneWithProps = require('cloneWithProps'); var shallowCompare = require('shallowCompare'); var update = require('update'); <ins> var warning = require('warning'); var warnedAboutBatchedUpdates = false; </ins> React.addons = { CSSTransitionGroup: ReactCSSTransitionGroup,

Discussion:
We shipped this in 0.13 but then exposed it as (or ) in master. We should deprecate the usage in (separately from other deprecation notices because we aren't shipping this as a standalone addon).
I can't find any information regarding this decision, if goes away, how are we supposed to batch setStates in non-dom event handlers?
. As of right now, the batching is a part of the reconciler which lives in , even if it's used by non-dom event handlers.
Change:
> > [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4) > <del> > * [JSFiddle](https://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount(). </del> <ins> > * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount(). </ins> ## Introduction to React Screencast

Discussion:
The Post gave an example of reconciliation by this . but It's not working, If I understand correctly, it should be something like . Should I create a PR by change the url to fix it?
The problem is that it is a https link for a fiddle that only supports http. There are actually more links with the same bug. Updating the fiddles would be one way to fix it, but that is a lot of work. And since the fiddles are part of old blog posts, it would be kind of like rewriting history. In my opinion the best way to fix it is reverting the links back to http. See for my proposed solution.
I see, thank u
I feel like the more 'correct'/'ideal' solution is to have the fiddle authors update their fiddles. That said, I don't feel too strongly, and will let make the decision on this.
Change:
'jsx:normal', 'npm-react:release', ]); <del> grunt.registerTask('build:gem-react-source', [ 'build', 'gem-react-source:release', ]); </del> grunt.registerTask('webdriver-phantomjs', require('./grunt/tasks/webdriver-phantomjs'));

Discussion:
I'm not sure how much value there really is in this. react-rails already stopped using it and just builds the files in itself. cc
(I'm currently running to find out how many there might be - looks like this script may take a day to hit the end point for every gem in the registry)
:+1: I made but it's just a toy :)
Change:
var source = null; if (config != null) { <del> ref = config.ref === undefined ? null : config.ref; key = config.key === undefined ? null : '' + config.key; </del> <ins> if (__DEV__) { ref = !config.hasOwnProperty('ref') || Object.getOwnPropertyDescriptor(config, 'ref').get ? null : config.ref; key = !config.hasOwnProperty('key') || Object.getOwnPropertyDescriptor(config, 'key').get ? null : '' + config.key; } else { ref = config.ref === undefined ? null : config.ref; key = config.key === undefined ? null : '' + config.key; } </ins> self = config.__self === undefined ? null : config.__self; source = config.__source === undefined ? null : config.__source; // Remaining properties are added to a new props object

Discussion:
The props and are reserved by React, and used internally. Component authors may attempt to access these properties (thinking they could read the value, as per ). We could use (in dev mode) to warn if or is accessed, and point the user to a note/discussion somewhere. That way, users who actually run into the issue will always get a timely message that sends them directly to the relevant explanation/discussion. This would be a good first bug, if we decide we actually want to do it.
This sounds like a great idea to me!
Yeah this seems reasonable.
hi, I am interested in working on this; as I am looking forward to contribute. Kindly show me the way. Thanks in advance!
Take a look at , that should give you a good start and a good idea of what we would be looking for.
Thanks Checking it out right away.
I have taken a look at the pull request, and associated code review comments. It seems the warn-once policy is required here, as implemented in I am not sure I fully understand how this module achieves this, so I am reading it now. As per the code review comments in , I am using the URLs instead of StackOverflow URLs. But the comments over there also mentioned that the PR might break some test cases. I am not sure about the edge cases here. I feel like I could use some help on understanding this. Instead of using GitHub issue comments, is it possible to use some chat-platform such as IRC or slack room or Gitter?
The module achieves deduplication by setting a boolean if it has already warned. The comments about breaking tests are referring to the failing unit tests. Just run and to verify that everything is working before pushing your changes. There are many places where you can discuss, including the IRC channel and/or reactiflux. There are also github issues (which is what our core team predominantly uses), as well as several other channels. The community is pretty big, but nothing is quite as good as reading through the code and github issues, IMHO.
Sorry, I was away. is ready to be reviewed.
Change:
}, MemberExpression: function(path, file) { <del> if (file.filename.indexOf('shared/assign') !== -1) { </del> <ins> if (/shared(/|)assign/.test(file.filename)) { </ins> // Don't replace Object.assign if we're transforming shared/assign return; }

Discussion:
<!-- 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: Current main branch the repository from the main branch node and yarn (node version: 16.14.0, yarn version: 1.22.17, JDK version: tried both 11 and 17) yarn yarn build <!-- 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. --Error message : <!-- 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 error messages from rollup. Success in yarn build.
If rollup is crashing during the build process, that's a rollup problem.
Yes, that was what my colleagues and I are thinking too. Then shouldn't something change related to Rollup, like going back to the previous version of code, or another way to resolve the error in the react project?
Exactlly it's the problem of Rollup and already fix it two years ago. See
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!
Change:
## IRC Many developers and users idle on Freenode.net's IRC network in **[#reactjs on freenode](irc://chat.freenode.net/reactjs)**. <ins> ## Twitter [**#reactjs** hash tag on Twitter](https://twitter.com/search?q=%23reactjs) is used to keep up with the latest React news. <center><a class="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactjs" data-widget-id="342522405270470656"></a></center> </ins>

Discussion:
The shows:  Sometimes we will make a typo mistake,e.g., enter not , not ,and then the result are the same with the pic above.This will make us very confused. And sometimes will spend us 2 or more minutes to find the typo,because at first we will check the code when we first see the error,"oh,god,I don't use ,why the error says it should be a func?",and then check it again and again,and finally find that it's just a typo and react will treat the as a to check. I think this is not very friendly and the doc does not mention.Maybe it could be improved?
If it's really not what React intended, can I work on this to throw a relevant warning?
I think it's clear enough. It shows on console that the property type is invalid, so you start from there. The prop type can be any function, from PropTypes object or not.
You are right.But the point is that if you don't know react will treat the undefined as a func to check,then you will be very confused,it maybe will spend your a lot of time to figure it out especially for new people.And the doc doesn't mention this. So I agree that if you already know this,it will be easy to realize what the error means.But for new people,it's not very friendly.
PropTypes have been removed from React core and now exist as a separate package . Any future feature requests, bug reports, or changes should be directed to the new repo at
in python we have somthing called deprecation warning ¬¬
in python we have somthing called deprecation warning ¬¬ So do we, and PropTypes have been warning since April. And there's automated codemod that will change the code for you (it's in the link).
Change:
); } }); <ins> PagePopUpContent = React.createFactory(PagePopUpContent); </ins> // Render application. React.render(App(null), document.getElementById('content'));

Discussion:
When I run the in examples jquery-mobile in the chromium browser, I get: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of (anonymous function)
I can confirm. Works fine with React version “0.12.2", but "0.13.0-alpha.2" gives: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined ReactClass.createClass.Constructor (anonymous function) The jquery-mobile example is using component constructors in a way which makes the new version explode. gaearon lays is out here:
We'll make sure all the examples are working before we release 0.13 final but until then there's a non-trivial change they'll be broken at any point in time. Check out the latest stable branch for the working examples.
Change:
chrome.devtools.inspectedWindow.eval( `window.postMessage({ source: 'react-devtools-inject-backend', <del> extensionId: "${CURRENT_EXTENSION_ID}" </del> <ins> extensionId: "${CURRENT_EXTENSION_ID}", </ins> }, '*');`, function(response, evalError) { if (evalError) {

Discussion:
a website that uses React. an element that uses Hooks. to load hook names. hook names always fails: !
Fix landed in , it should be a few days before it can be published to the Chrome Web Store, since it needs to go through the review process.
Change:
); Object.defineProperty(activeElement, 'value', newValueProp); <del> activeElement.attachEvent('onpropertychange', handlePropertyChange); </del> <ins> if (activeElement.attachEvent) { activeElement.attachEvent('onpropertychange', handlePropertyChange); } else { activeElement.addEventListener('propertychange', handlePropertyChange, false); } </ins> } /** <del> * (For old IE.) Removes the event listeners from the currently-tracked element, </del> <ins> * (For IE <=11) Removes the event listeners from the currently-tracked element, </ins> * if any exists. */ function stopWatchingForValueChange() {

Discussion:
Check: Tested in IE10. Likely related to .
We're having issues with this too and had to put in a workaround to deal with it. is this on your roadmap?
Having the same issue with on using IE 11.0.
I have the same issue as when adding a placeholder a textarea, with no value, the onChange event is fired.
I hava the same issue. A input with a placeholder and no value, the onChange event is fired.

See for example code. When setting and removing focus from an empty field with some text, the event is triggered for IE 11 (I have not tested older versions). It does not trigger for other browsers. My current work-around is to test the that was last passed to the input with what is returned by , and only act if they are different, but it would be nice if React would not send the change-event in the first place.
Sounds like a browser quark that we should normalize against, right? Is there anything other than value that we would need to check?
Yeah, this seems odd. Probably on the challenging side for a first bug, but it would be good to figure out why this is happening and how we can prevent it, while still making it possible to type the placeholder text in directly as says.
, not really related but I imagine both could be solved by a similar fix.
Also goes for IE10.
Change:
} scripts.forEach(function(script, i) { <del> var options; </del> <ins> var options = { sourceMap: true }; </ins> if (/;harmony=true(;|$)/.test(script.type)) { <del> options = { harmony: true }; </del> <ins> options.harmony = true </ins> } // script.async is always true for non-javascript script tags

Discussion:
This is a tricky issue, so I'll do my best to explain: I've been using the to build my React app using AMD. I've been using a of React (with ), which is based off of master. Until recently, everything was working fine. But since , I've been unable to create optimized builds using the plugin. At first, I assumed it was an issue with the plugin, but it seems that the offending line is the changed function: Until this change, wasn't forced on, and things worked just fine. With this change, it's no longer possible to build in an AMD environment, as errors out with: My best guess is that the isn't being correctly loaded (although it is included ), but I don't know enough about Browserify to debug this. Hoping someone else can take a look and find out what's going on. (in the meantime, I suppose I'll update my branch to undo the change that set )
is this still happening for you?
just updated to v0.9.0, and yep: Unfortunately still having to maintain my own branch :(
I have the same issue.
thanks for tracking this issue down. I was trying to update React in and was puzzled by this. I will disable it manually in the modified provides.
Change:
<ins> import TestCase from '../../TestCase'; const React = window.React; const ReactDOM = window.ReactDOM; const MouseEnter = () => { const containerRef = React.useRef(); React.useEffect(function() { const hostEl = containerRef.current; ReactDOM.render(<MouseEnterDetect />, hostEl, () => { ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]); }); }, []); return ( <TestCase title="Mouse Enter" description="" affectedBrowsers="Chrome, Safari, Firefox"> <TestCase.Steps> <li>Mouse enter the boxes below, from different borders</li> </TestCase.Steps> <TestCase.ExpectedResult> Mouse enter call count should equal to 1; <br /> Issue{' '} <a rel="noopener noreferrer" target="_blank" href="https://github.com/facebook/react/issues/16763"> #16763 </a>{' '} should not happen. <br /> </TestCase.ExpectedResult> <div ref={containerRef} /> </TestCase> ); }; const MouseEnterDetect = () => { const [log, setLog] = React.useState({}); const firstEl = React.useRef(); const siblingEl = React.useRef(); const onMouseEnter = e => { const timeStamp = e.timeStamp; setLog(log => { const callCount = 1 + (log.timeStamp === timeStamp ? log.callCount : 0); return { timeStamp, callCount, }; }); }; return ( <React.Fragment> <div ref={firstEl} onMouseEnter={onMouseEnter} style={{ border: '1px solid #d9d9d9', padding: '20px 20px', }}> Mouse enter call count: {log.callCount || ''} </div> <div ref={siblingEl} /> </React.Fragment> ); }; export default MouseEnter; </ins>

Discussion:
Do you want to request a feature or report a bug? I want to report a bug. What is the current behavior? Event handlers on elements are fired twice, when hovering from one element onto the next. 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? Event handlers should only fire once. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.8.4 ReactDOM 16.8.4 Chrome 76.0.3809.132 Firefox 69.0 (64-Bit) Edge 44..267.0
After testing it again and again, I found how to reproduce it: Step 1, render a new component inside a rendered component; Step 2, inside the new component, mouse enter a node from its sibling. Current result: onMouseEnter is called more than once. Demo: We may change the issue title because it's not related with . I've made a test and fixture for this: Hope the information can be helpful. I still have no idea how to fix it. If there's no one working on this, I would like to pick this up. There's a similar issue Do you have any advice?
Go for it,
Let's close this? I see the fix was merged in .
Change:
<ins> ## Input ```javascript function Component(props) { let value; const object = { set value(v) { value = v; }, }; object.value = props.value; return <div>{value}</div>; } export const FIXTURE_ENTRYPOINT = { fn: foo, params: [{ value: 0 }], sequentialRenders: [{ value: 1 }, { value: 2 }], }; ``` ## Error ``` 2 |   let value; 3 |   const object = { > 4 |     set value(v) { |     ^^^^^^^^^^^^^^ > 5 |       value = v; | ^^^^^^^^^^^^^^^^ > 6 |     }, | ^^^^^^ Todo: (BuildHIR::lowerExpression) Handle set functions in ObjectExpression (4:6) 7 |   }; 8 |   object.value = props.value; 9 |   return <div>{value}</div>; ``` </ins>  No newline at end of file

Discussion:
[ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) [X] babel-plugin-react-compiler (build issue installing or using the Babel plugin) [ ] eslint-plugin-react-compiler (build issue installing or using the eslint plugin) [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) In the above code, doubleValue uses get syntax, and after compilation, it loses the keyword and becomes an ordinary function. In this case the compiler should skip compilation until this syntax is supported. I know that some syntaxes are currently unsupported by the react compiler, can we know what syntaxes are currently unsupported and in process? Every time 0-rc--
Thanks for posting, this is a bug. We have not support for get/set syntax but looks like we missed a todo for this.
Let’s close when the associated PR lands
Oops my bad, I didn't read