jiebi/CodeConvo huggingface dataset:
Change:
'OverrideDisplayName', ); }); it('should return correct display name for an element with a type of StrictMode', () => { const element = createElement(StrictMode); expect(getDisplayNameForReactElement(element)).toEqual('StrictMode'); }); it('should return correct display name for an element with a type of SuspenseList', () => { const element = createElement(SuspenseList); expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList'); }); it('should return NotImplementedInDevtools for an element with invalid symbol type', () => { const element = createElement(Symbol('foo')); expect(getDisplayNameForReactElement(element)).toEqual( 'NotImplementedInDevtools', ); }); it('should return NotImplementedInDevtools for an element with invalid type', () => { const element = createElement(true); expect(getDisplayNameForReactElement(element)).toEqual( 'NotImplementedInDevtools', ); }); it('should return Element for null type', () => { const element = createElement(); expect(getDisplayNameForReactElement(element)).toEqual('Element'); }); }); <ins> describe('format', () => { it('should format simple strings', () => { expect(format('a', 'b', 'c')).toEqual('a b c'); }); it('should format multiple argument types', () => { expect(format('abc', 123, true)).toEqual('abc 123 true'); }); it('should support string substitutions', () => { expect(format('a %s b %s c', 123, true)).toEqual('a 123 b true c'); }); it('should gracefully handle Symbol types', () => { expect(format(Symbol('a'), 'b', Symbol('c'))).toEqual( 'Symbol(a) b Symbol(c)', ); }); it('should gracefully handle Symbol type for the first argument', () => { expect(format(Symbol('abc'), 123)).toEqual('Symbol(abc) 123'); }); }); </ins> });

Discussion:
This function will throw this error if one of the arguments is type of . The error is swallowed but it does interfere with debugging. When I run with the "pause on caught exceptions" I get trapped here all the time. Can we change into ??? Every time No response 13.2- TypeError: Cannot convert a Symbol value to a string No response No response No response
Change:
Scheduler.unstable_advanceTime(5); // 0 -> 5 ReactTestRenderer.create( <del> <> </del> <ins> <React.Fragment> </ins> <AdvanceTime byAmount={20} /> <React.Profiler id="test" onRender={callback}> <AdvanceTime byAmount={5} /> </React.Profiler> <AdvanceTime byAmount={20} /> <del> </>, </del> <ins> </React.Fragment>, </ins> ); expect(callback).toHaveBeenCalledTimes(1);

Discussion:
: However, given: I'm getting a log when I click on the unprofiled counter. Reproduction: Am I misunderstanding this API, or is this a bug?
As the state is being updated by Counter function which is being called on both the profiled and unprofiled counter, is causing re render and is being called both the times.
Thanks but I'm pretty sure that the way it's documented (and what would be sensible) it shouldn't be operating like that. Also, I tried making a separate component instead of using the same one and I got the same result.
At a quick glance it does look unexpected. Don't have time to dig in further at the moment though.
It seems that this occurs for elements which have same type with greater or equal depth in same tree. See:
I don't think it has anything to do with the element type, but where they are declared relative to where the tags are defined. It looks like for a subtree that belongs to a single owner- rendering further down in the subtree will cause the Profiler higher up to call . Given the above example:
This does not look to be hooks-specific, nor is it a recent regression. (Same behavior is exhibited for class components in the earliest release of the Profiler component- v16.5.)
It seems that the is always marked as in phase.
Thanks
Change:
if (!styles.hasOwnProperty(styleName)) { continue; } <ins> if (__DEV__) { if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } } </ins> var styleValue = dangerousStyleValue(styleName, styles[styleName]); if (styleValue) { style[styleName] = styleValue;

Discussion:
We happen to "support" hyphenated keys to the style object on initial render (because we attempt to hyphenate camelcased keys) but those styles will never be updated on subsequent renders because we never attempt to unhyphenate. So we should warn when we see a hyphenated style.
Some browsers support assigning with hyphenated keys, but probably not all do.
AFAIK only Webkit does. (And I guess by association, Blink)
Perhaps another one for you!
OK
Sorry for the long delay, been busy. I'll try to do this today.
No problem, whenever you have time.
Curious: why do we not want to hyphenate names on subsequent updates, and instead show a warning? Because there should be “one way to do that”?
Yes, this matches our existing practice of requiring camel-cased attributes in general, which makes it easier to make warpper components that modify props in some way because you only need to look in one place to find the original value. In addition, you don't need to worry about what happens if someone were to specify both and in the same style block. (One last advantage: if the warnings happen only in the dev version, then there's no runtime cost in the production build.)
Do you think it's worth adding for the sake of providing a suggestive warning? (e.g. )
There you go! I also updated the docs about prefix, since it's not clear right now.
A warning would be very helpful, this just sucked up a lot of my time. If anyone is interested, chrome seems to handle hyphenated CSS props OK but FF doesn't
Change:
`), ).toMatchSnapshot(); }); <ins> it('can handle implicit arrow returns', () => { expect( transform(` export default () => useContext(X); export const Foo = () => useContext(X); module.exports = () => useContext(X); const Bar = () => useContext(X); const Baz = memo(() => useContext(X)); const Qux = () => (0, useContext(X)); `), ).toMatchSnapshot(); }); </ins> });

Discussion:
Using 0.4.0 is giving me this error on a large number of files: I narrowed down that file to the simplest thing that causes it: Originally posted by in
Fixed in 0.4.1
Change:
} case Profiler: if (enableProfilerTimer) { <del> workInProgress.effectTag |= Update; </del> <ins> // Profiler should only call onRender when one of its descendants actually rendered. const hasChildWork = workInProgress.childExpirationTime >= renderExpirationTime; if (hasChildWork) { workInProgress.effectTag |= Update; } </ins> } break; case SuspenseComponent: {

Discussion:
: However, given: I'm getting a log when I click on the unprofiled counter. Reproduction: Am I misunderstanding this API, or is this a bug?
As the state is being updated by Counter function which is being called on both the profiled and unprofiled counter, is causing re render and is being called both the times.
Thanks but I'm pretty sure that the way it's documented (and what would be sensible) it shouldn't be operating like that. Also, I tried making a separate component instead of using the same one and I got the same result.
At a quick glance it does look unexpected. Don't have time to dig in further at the moment though.
It seems that this occurs for elements which have same type with greater or equal depth in same tree. See:
I don't think it has anything to do with the element type, but where they are declared relative to where the tags are defined. It looks like for a subtree that belongs to a single owner- rendering further down in the subtree will cause the Profiler higher up to call . Given the above example:
This does not look to be hooks-specific, nor is it a recent regression. (Same behavior is exhibited for class components in the earliest release of the Profiler component- v16.5.)
It seems that the is always marked as in phase.
Thanks
Change:
var app = <MyComponent someProperty={true} />; ``` <ins> JSX will infer the component's name from the variable assignment and specify the class's [displayName](/react/docs/component-specs.html#displayName) accordingly. </ins> See [Multiple Components](/react/docs/multiple-components.html) to learn more about using composite components. > Note:

Discussion:
I couldn't find a reference to the fact that jsx transform attaches to the component spec, this would be nice to document somewhere (more importantly, that not using jsx means debugging messages will be littered with ). I found this while using .
That would be very nice indeed. If you want to take a stab at it, the docs are in the repo in the markdown format. Would love to have you on the contributor list :)
Change:
case MemoComponent: { const type = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; <del> const resolvedProps = resolveDefaultProps(type.type, unresolvedProps); </del> <ins> // Resolve outer props first, then resolve inner props. let resolvedProps = resolveDefaultProps(type, unresolvedProps); resolvedProps = resolveDefaultProps(type.type, resolvedProps); </ins> return updateMemoComponent( current, workInProgress,

Discussion:
With this: If I render again after it resolves, it won't get the default prop value. This is a bug.
Change:
); }); <ins> itRenders('svg element with a tabIndex attribute', async render => { let e = await render(<svg tabIndex="1" />); expect(e.tabIndex).toBe(1); }); itRenders( 'svg element with a badly cased tabIndex attribute', async render => { let e = await render(<svg tabindex="1" />, 1); expect(e.tabIndex).toBe(1); }, ); </ins> itRenders('a math element', async render => { const e = await render(<math />); expect(e.childNodes.length).toBe(0);

Discussion:
See the original report in The problem is that SVG is case sensitive, and so naïvely setting and relying on insensitivity won't work with it. The good news is it seems like is the only valid with this problem. We just missed it because it applies both to HTML and SVG. I think the fix is to add it back to the whitelist.
simple example where tabbing works & doesn't work depending on case Note that the console does not state the error did you mean not being Not really sure why this is but it does display in our app.
Thanks for confirming this issue, I've been struggling to identify the reason my svg component stopped working after the update. A component made of clickable <circleshave lost both focus and blur functionality, because "tabIndex" is rendered in the camelCase style and then ignored by the browser. I've tried adding the property "tabindex" to the <circletag in the jsx, but it was swallow by React and not rendered to the final component.
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.
apologies just seeing this message now. Yes. The issue is resolved with the beta, rc & 16.1
Change:
if (options.harmony) { visitorSets.push('harmony'); } <ins> if (options.es3) { visitorSets.push('es3'); } </ins> if (options.stripTypes) { // Stripping types needs to happen before the other transforms // unfortunately, due to bad interactions. For example,

Discussion:
When I run: The following error is thrown: I'm trying to use a library called in an isomorphic app, which needs server-side rendering. The module works fine client-side, but the JSX/ES6 isn't playing nice on the server even though the server's already set up to render React components and other JSX code. As stated , it seems there's a transformation supported in (via its flag) which isn't supported in . I say "seems" because I have a hard time believing can't do the same thing. What am I missing?
Change:
var React = { DOM: ReactDOM, <ins> Props: ReactProps, </ins> initializeTouchEvents: function(shouldUseTouch) { ReactMount.useTouchEvents = shouldUseTouch; },

Discussion:
! The only alternative is using chains which aren't very readable at their own.
I think you're making it more complicated than it needs to be. If it uses some prop like : However, note that this doesn't guarantee requests come in order. So a better solution would be: This is a good article that goes into more detail and has more useful examples: In longer term, we'll recommend Suspense for data fetching which will look more like and no effects. But in the meantime the code above works fine.
What if I need to close over ? (Or based on your example): Also where do the errors go that are thrown in that async function invocation? I'd need to it? Or try/catch the body of the async so the promise always resolves? Why not make useEffect take an async function if we'd have to wrap them all the time anyways?
I guess one can always just :
now I should use instead of into a React Component with Hooks. Scenario "initial unique call to a server": To accomplished this, DependencyList ( second argument of useEffect) in useEffect should every time an empty array otherwise the application will send every state change a fetch call to the server. it' means , this it the best practise to getData ` Full Code here <details
Please ask on StackOverflow and feel free to link to your question from here. We don’t use issues for support because answers get lost on GitHub.
supports being async so I think useEffect should accept a promise and automatically resolve it to avoid having to them.
It is an intentional design decision. The async/await model is a pitfall for effects in general (and has always been a pitfall in classes!) due to race conditions. In the longer term, Suspense will be the recommended data fetching solution, and you can do / there. But Suspense for data fetching is not ready yet.
As I explained above, is a bad idea because you don't know whether is still relevant. For example, if the user starts fetching one profile page but then switches to another profile. Then you're at the mercy of which request arrives first, and can show incorrect data. This kind of code would handle it correctly: I'm going to lock this issue as resolved to prevent further confusion. Here's a good article that answers your other questions (e.g. about loading states):
Change:
## Practical Examples <del> * [React ART](https://github.com/facebook/react/blob/master/src/renderers/art/ReactARTFiberEntry.js) * [React DOM](https://github.com/facebook/react/blob/master/src/fb/ReactDOMFiberFBEntry.js) * [React Native](https://github.com/facebook/react/blob/master/src/renderers/native/ReactNativeFiberRenderer.js) </del> <ins> * [React ART](https://github.com/facebook/react/blob/master/packages/react-art/src/ReactART.js) * [React DOM](https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js) * [React Native](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactNativeFiberRenderer.js) </ins> If these links break please file an issue and we’ll fix them. They intentionally link to the latest versions since the API is still evolving.

Discussion:
Reporting this since it says "If these links break please file an issue and we’ll fix them. They intentionally link to the latest versions since the API is still evolving." and knowing the place of the most up-to-date examples would help me a lot. The issue template does not really fit here but I'm trying to follow it anyway. Do you want to request a feature or report a bug? Bug (In a README) What is the current behavior? In there are 3 links to reconciler configuration examples of , and . All 3 links are broken 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 for React 16: , template for React 15: ). Just visit the  What is the expected behavior? Correct links I wanted to fix these in a PR but could only find an appropriate replacement for react-native here: Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Issue exists on -branch
The other ones are called just ReactDOM and ReactART. Please submit a PR.
Change:
'use strict'; <del> var mouseListenerNames = { onClick: true, onDoubleClick: true, onMouseDown: true, onMouseMove: true, onMouseUp: true, onClickCapture: true, onDoubleClickCapture: true, onMouseDownCapture: true, onMouseMoveCapture: true, onMouseUpCapture: true, }; </del> <ins> var DisabledInputUtils = require('DisabledInputUtils'); </ins> /** * Implements a <button> native component that does not receive mouse events * when `disabled` is set. */ var ReactDOMButton = { <del> getNativeProps: function(inst, props) { if (!props.disabled) { return props; } // Copy the props, except the mouse listeners var nativeProps = {}; for (var key in props) { if (props.hasOwnProperty(key) && !mouseListenerNames[key]) { nativeProps[key] = props[key]; } } return nativeProps; }, </del> <ins> getNativeProps: DisabledInputUtils.getNativeProps, </ins> }; module.exports = ReactDOMButton;

Discussion:
The same in Chrome 35.0.1916.153. It's OK in Chrome Canary 38.0.2082.0 canary (64-bit).
This is actually an - we've the workarounds to make sure disabled s actually behave correctly here. This holds for all disabled inputs it seems.
Change:
{ "name": "react-devtools-inline", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js",

Discussion:
local repo Loading a React component with the React profiler recording enabled Every time react-devtools-extensions 27.6- Cannot add node "1751" because a node with that id is already in the Store. No response
! Same issue here. Devtools version: 4.27.6 (4/20/2023)
Same issue here. Using NextJS 13.4.1 !
Same issue here. Happens, when adding Canvas element. version 8.13.0 <img width="682" alt="Снимок экрана 2023-05-10 в 22 31 40" src=""
Same issue: !
same... do you all have code for a chrome extension?
same with devtools version: 4.27.7 (5/7/2023) !
I've installed a React profiler via Chrome web store () which created a second copy of an extension under "From other sources" title in extensions panel, after that I've deleted a copy of an react dev tools that was 'native' to edge, and voila, profiler works.
Hey folks, the only reproducible example I've found is mentioned in I've merged a fix for it, but need more input from you: you are constantly facing this issue, can you post here a repro please? you please follow and try to reproduce this error again?
I am no longer seeing this error after installing the release you linked in .
Great, thank you! This fix will be included in v4.27.8 release, which I will publish this week.
Change:
- `order` - `orphans` - `strokeOpacity` <ins> - `tabSize` </ins> - `widows` - `zIndex` - `zoom`

Discussion:
The  CSS property should not be getting a suffix automatically because a unit-less value can represent the number of spaces that make up the width in a tab. The JS name for this property is . See in the React docs.
A solution for now is to use the which is pretty much equivalent.
Sounds like a good idea. Are you interested in creating a PR to add it?
Yes, the only thing I don't know is whether there needs to be anything special done to also include and handle object already in place
We autogenerate the vender-prefixed styles there (which you might have seen below where you changed code) so that's all you need to do! Thanks again.
Change:
it('warns when classic properties are defined on the instance, ' + 'but does not invoke them.', function() { spyOn(console, 'error'); <ins> var getDefaultPropsWasCalled = false; </ins> var getInitialStateWasCalled = false; class Foo extends React.Component { constructor() {

Discussion:
I am working on a very simple component with default props. And I simply render it without any props (). But I got an empty object from console output. I am using react 0.13.1, chrome 41, OSX 10.10. Any idea what is going wrong?
Es6 classes need defaultProps as a static property. Navigation.defaultProps = {...}
Thanks. Maybe update this in documentation :) ? I will be happy to send in a PR
has some commentary on docs and es6. I agree that I’d like to see better docs on the class syntax. I’m just a guy who happened to see your issue really quickly :)
does reference this. It might be good to also put some documentation in to make it a bit easier to find. I'm going to close this out since it's invalid but I'd love to see a PR with more docs :)
I think you should have also seen a runtime warning for this?
not really, though
Thanks, looks like an oversight. Fix incoming…
Change:
expect(console.error.argsForCall.length).toBe(0); }); <ins> // NOTE: We're explicitly not using JSX here. This is intended to test // classic JS without JSX. </ins> it('allows static methods to be called using the type property', function() { spyOn(console, 'error');

Discussion:
The have this at the beginning: But there're a number of instances of JSX in the file. For example, . the note be removed or clarified? JSX be purged from the file? adding tests to this file should they be free of JSX? In certain contexts but not others?
Normally, our style is to use jsx within tests. I think some of the tests explicitly aren't using jsx, and that's the point. Perhaps it would be better to copy-paste that message into each of the tests that doesn't use jsx, since it's easy to miss the note up at the top and having the note at the top is somewhat ambiguous.
Thanks for the feedback. Yeah, for both of those reasons I'd say :+1: to either that or splitting it into two files if that made sense to you (would help with the ease of missing it if it's just at the top and make the alternative of repeating it within the file unnecessary): .
I'd be happy to submit a PR for either of these cases!
I think I prefer having the inline comment copy-pasted. A little copy-pasting never hurt anyone (). I'd take a PR for this, assuming no one else objects.
Change:
return ( <div> <button onClick={this.handleAdd}>Add Item</button> <del> <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> </del> <ins> <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> </ins> {items} </ReactCSSTransitionGroup> </div>

Discussion:
When a is used without timeout props, it : for each missing timeout prop. However, that URL simply points to . The code listed there does use timeout props, but nothing on the page explains what those props do or why they're necessary. In fact, the word "timeout" only appears in the names of those props in code examples. Could we get some explanation in the docs, please?
Hmm, I think it does: <img width="516" alt="screen shot 2016-07-20 at 15 23 18" src=""Some line breaks would help there. There is an entry explaining why they were in 0.14 release notes: <img width="717" alt="screen shot 2016-07-20 at 15 24 12" src=""(I’m not saying it’s easy to find—it’s out fault for not updating the docs to reflect that.) Would you like to massage the doc page and send a PR?
Ah, got it. Yeah, knowing how it works now, I can do that. Thanks!
Can transitionAppearTimeout replace transitionLeaveTimeout?? If i am using animation for initial mount because i am still getting error with .... In facebook docs they replaced LeaveTimetout with AppearTimeout... but it looks like there still must be LeaveTimeout..