title

. at h3 at IndexPage at Suspense at App (webpack-internal:///./pages/_app.js:42:27) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27) ```` ```` Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. at throwOnHydrationMismatch (react-dom.development.js?ac89:14344:1) at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:14372:1) at updateHostComponent$1 (react-dom.development.js?ac89:20636:1) at beginWork (react-dom.development.js?ac89:22373:1) at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1) at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1) at invokeGuardedCallback (react-dom.development.js?ac89:4270:1) ```` - Depending on the location of the suspending component and their siblings, there are errors or no errors at all. When the suspending component is the last component, there are no errors logged. - Error can be suppressed by wrapping the suspending component in a Suspense boundary directly ## The expected behavior - I expect to be able to use the same fetching mechanism using suspense on server and client in [React v18](https://reactjs.org/blog/2022/03/29/react-v18.html#suspense-in-data-frameworks). _OR_ - If this is unsupported usage, the errors should be more clear and consistent." facebook/react,2022-04-12 15:27:31,bug,Bug: Some transition updates haven't been rendered," React version: 18.0.0 ## Steps To Reproduce 1. Write a react component with the following code: ```jsx import React, { useState, startTransition } from 'react'; export default function App() { const arr = Array(9999).fill(1); const [value, setValue] = useState(0); const handleInputChange = (e) => { console.log(e.target.value); startTransition(() => { setValue(e.target.value); }); }; const getValues = () => { return arr.map((item, index) => { return (

{value}-{index}

); }); }; return (

{getValues()}

); } ``` 2. input content in the `` at a very fast speed. 3. As shown in the figure below, all the contents I entered for the first time have been rendered. But the second time I input `216948261894`, only `216948` is rendered, and the following characters are not rendered. ![img](https://s1.ax1x.com/2022/04/12/LnoNvQ.gif) Link to code example: https://codesandbox.io/s/react18-starttransition-5u1en2?file=/src/App.js ## The current behavior As shown in the figure below, all the contents I input for the first time have been rendered. But the second time I input `216948261894`, only `216948` is rendered, and the following characters are not rendered. ## The expected behavior Everything I input should be rendered." facebook/react,2022-04-05 14:21:22,bug,Bug: componentWillUnmount is called twice,"React version: 18.0.0 ## Steps To Reproduce `componentWillUnmount` is called twice upon toggling the rendered component. Even when **StrictMode** is disabled Link to code example: https://codesandbox.io/s/componentwillunmount-called-twice-hrpzy5?file=/src/App.js ## The current behavior After upgrading to react 18 we've seen some different behavior in a conditionally rendered, lazy class component. In the provided code example the class component is rendered first. After the first toggle, the class component's componentWillUnmount is called twice. Subsequent toggle calls correctly lead to a single componentWillUnmount invocation. This does only seem to affect the class component when its rendered first. If the condition is changed to initially show the other function component the class component unmounts just fine ## The expected behavior The class component's componentWillUnmount is only called once" facebook/react,2022-04-04 00:59:24,bug,Bug: `suppressHydrationWarning` is not taken into account in production builds in React 18," React version: 18 ## Steps To Reproduce 1. Clone https://github.com/Avansai/next-multilingual 2. run: npm install 3. run: npm build 4. run: npm run start-example-build 5. Go to the following URL: http://localhost:3000/fr-ca/tests/routes-dynamiques/123 6. Open the console log: no errors 7. Kill the app, and update the react and react-dom package to version 18.0 8. Re-run steps 2 to 5 9. Open the console log: lots of hydration errors #[425](https://reactjs.org/docs/error-decoder.html?invariant=425), #[418](https://reactjs.org/docs/error-decoder.html?invariant=418) and #[423](https://reactjs.org/docs/error-decoder.html?invariant=423). Link to code example: https://github.com/Avansai/next-multilingual ## The current behavior Using React 18, the tests are failing because of the errors being thrown in the console. I confirmed this was related to `suppressHydrationWarning` because as soon as I removed the following code from: https://github.com/Avansai/next-multilingual/blob/main/example/pages/tests/dynamic-routes/%5Bid%5D.tsx#L37 ```jsx {messages.format('rowLocalizedWithAsPath')} {/* Adding `suppressHydrationWarning` until https://github.com/vercel/next.js/issues/32772 is resolved */} {asPath} ``` The errors stop. However, I could not find any mention that `suppressHydrationWarning` was no longer supported with React 18 and these errors are only triggered on builds, not in dev mode (which is why I am opening this issue) ## The expected behavior `suppressHydrationWarning` should prevent these errors from being thrown." facebook/react,2022-04-03 15:03:00,bug,"[DevTools Bug] Cannot add child ""2"" to parent ""1"" because parent node was not found in the Store.","### Website or app https://github.com/Sam-Apostel/3d-browser/tree/f124285a55930bb78e42099e33047827919cb800 ### Repro steps clone the repo at the linked commit - npm install - npm run dev - open localhost:3000 - open react devtools - refresh the page ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-core ### DevTools version (automated) 4.23.0-e28a0db22 ### Error message (automated) Cannot add child ""2"" to parent ""1"" because parent node was not found in the Store. ### Error call stack (automated) ```text at /usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:330974 at c.emit (/usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:277732) at /usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:279273 at /usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:659742 at Array.forEach () at A.e.onmessage (/usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:659726) at A.t (/usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:44:3009) at A.emit (events.js:315:20) at e.exports.L (/usr/local/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:8:13567) at e.exports.emit (events.js:315:20) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add child to parent because parent node was not found in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-03-30 15:10:06,bug,"NPM ""version"" export format changed (now includes SHA and date)","React version: 18.0.0 ## Steps To Reproduce 1. `import { version } from ""react""` 2. `console.log(version)` Link to code example: https://codesandbox.io/s/new-platform-dvqpp8?file=/src/App.js ## The current behavior Version is: `18.0.0-fc46dba67-20220329` ## The expected behavior Version is: `18.0.0` (or `18.0.1` 😉 )" facebook/react,2022-03-27 21:59:08,bug,[DevTools Bug]: useEffect hook incorrectly labelled as reason for component rendering,"### Website or app https://codesandbox.io/s/react-devtools-useeffect-incorrect-render-reason-x3inwg ### Repro steps 1. Start profiling 2. Click the button 3. Stop profiling 4. Check the reasons for rendering It is incorrect to say that hook 2 is why this rendered. Hook 1 is why it rendered. Hook 2 was rescheduled during that render. These really need to be separated as they are completely different things. In a component with a lot of effects it can be tedious to find which hook was the one that caused it to render (especially with transpilling, minifying etc where hooks are not always shown nicely). ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2022-03-22 06:19:18,bug,"[DevTools Bug] Unsupported Bridge operation ""0""","### Website or app React Native Init App ### Repro steps Just run the React-DevTools and then forward to port 8087 to debug in real device ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-core ### DevTools version (automated) 4.24.1-ac574d688 ### Error message (automated) Unsupported Bridge operation ""0"" ### Error call stack (automated) ```text at /Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:48:335334 at f.emit (/Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:48:278775) at /Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:48:280316 at /Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:48:664831 at Array.forEach () at A.Zh.e.onmessage (/Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:48:664815) at A.t (/Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:39:2836) at A.emit (events.js:315:20) at e.exports.L (/Users/tb921t/.npm-global/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:3:58322) at e.exports.emit (events.js:315:20) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Unsupported Bridge operation in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-03-14 17:50:04,bug,[DevTools Bug]: Components + Profile tabs not showing up in Chrome 99,"### Website or app https://codesandbox.io/s/new ### Repro steps 1. Open up Chrome inspector 2. Expect Components + Profile tabs to appear Computer: 2019 MacBook Pro (Intel) Browser: Google Chrome Version 99.0.4844.51 (Official Build) (x86_64) DevTools: 4.24.0 (3/10/2022) ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2022-03-04 20:49:02,bug,renderToReadableStream Passes Reusable Chunks,"https://github.com/cloudflare/miniflare/issues/203 We switched to using ""bytes"" streams but, by spec, chunks get transferred in that format. Totally reasonable. However, we pass reusable chunks which then get detached. I'm not sure why the polyfill or fixtures didn't catch this. We really should be using the byob model instead and copy into a larger chunk for perf anyway so this just makes that more urgent." facebook/react,2022-02-17 11:33:33,bug,"[DevTools Bug] Cannot add node ""1"" because a node with that id is already in the Store.","### Website or app local running intranet web app ### Repro steps 1 . start intranet web app 2. call in DevTools from React DevTools ""Components"" ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.23.0-e28a0db22 ### Error message (automated) Cannot add node ""1"" because a node with that id is already in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26229:41 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24415:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24581:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54033:39) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-02-15 20:08:08,bug,[DevTools Bug] Cannot read properties of undefined (reading 'skin'),"### Website or app https://coorpacademy.github.io/components/components/?path=/story/moleculequestionsfreetext--withdefaultvalue ### Repro steps Using the React dev tools, example: search for moleculequestionsfreetext in the story book, then the context is undefined hence the error (the provider shows that the skin is ok but the context doesn't reach the component - at least for the dev tools, because it actually reaches as the context is used), the patch is easy to get a default value in case it is undefined but it should not be needed because it would only for the devtools' sake. ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.23.0-e28a0db22 ### Error message (automated) Cannot read properties of undefined (reading 'skin') ### Error call stack (automated) ```text at FreeText (https://coorpacademy.github.io/components/components/main.e80d0d6a3191ede6a2b1.bundle.js:1:322446) at H (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13603:5) at exports.inspectHooksOfFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13671:12) at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8426:65) at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8709:38) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10542:56 at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4225:18) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4868:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:12535:9) ``` ### Error component stack (automated) ```text at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39022:3) at Suspense at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5) at div at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37864:3) at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40513:3) at div at div at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33354:3) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3) at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42520:52) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot read properties of undefined (reading 'skin') in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-02-12 23:29:52,bug,"[DevTools Bug] Could not find node with id ""18"" in commit tree","### Website or app https://github.com/ModelSaber/ModelSaber.Main ### Repro steps Just try and load the 2/5 and 3/5 report from a reload and start profiling instance. Change `REACT_APP_API_URL` to `https://apimodelsaber.rainemods.io` in order to launch the app without needing the full .NET 6 environment and the corresponding data in the postgres database. ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.23.0-e28a0db22 ### Error message (automated) Could not find node with id ""18"" in commit tree ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25574:13 at Map.forEach () at RankedChartBuilder_getChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25570:24) at ProfilingCache_ProfilingCache.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25686:11) at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43680:32) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15400:7) at zj (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16741:7) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19201:86) at il (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18756:11) at hl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18748:23) ``` ### Error component stack (automated) ```text at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43659:34) at div at div at div at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3) at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53276:34) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Could not find node with id in commit tree in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-02-02 10:58:47,bug,"[DevTools Bug] Could not find ID for Fiber ""App""","### Website or app https://codesandbox.io/s/react-devtools-bug-z2vjo ### Repro steps Run the Next app, open up react dev tools and inspect the Box component, rendered by @react-three/fiber. ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.23.0-e28a0db22 ### Error message (automated) Could not find ID for Fiber ""App"" ### Error call stack (automated) ```text at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:6493:11) at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8237:11) at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8406:21) at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8709:38) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10542:56 at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4225:18) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4868:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:12535:9) ``` ### Error component stack (automated) ```text at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39022:3) at Suspense at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5) at div at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37864:3) at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40513:3) at div at div at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33354:3) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3) at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42520:52) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3) at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Could not find ID for Fiber ""App"" in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-01-20 18:17:36,bug,[DevTools Bug]: Different results in chrome and firefox,"### Website or app https://www.youtube.com/, https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox,https://docs.github.com/en ### Repro steps I was using the YouTube website. I have a habit of checking if the website i have visited was using react or not. As always I checked for YouTube website too. But the react developer tools extension was showing the youtube website is using react. Just to make sure it was right I have installed the firefox browser then installed the react developer tools extension and opened the youtube website, But in firefox, the extension was saying the youtube is not using react. For confirming with other websites, I have visited mdn and GitHub docs in both chrome and firefox. The chrome react developer tools extension says that the mdn is using react and the firefox react developer tools extension says that the mdn is not using react. For the GitHub docs website, the chrome extension says that the GitHub docs website was using the react whereas the firefox react developer tools extension shows that the Github docs website doesn't use the react. I am attaching the screen recording. To differentiate what websites I have visited in chrome and firefox I previously opened the websites in chrome and showed the results, for firefox I have typed the query and showed the results. Can you tell why it was happening like this? https://user-images.githubusercontent.com/59245935/150397327-1cae5d73-0e63-4a32-b54b-5aa3da522db4.mov Repro steps 1. Login to the website 2. Scrolling the website 3. Noticed the bug Versions: Chrome: 97.0.4692.99 Firefox: 96.0.2 React Developer Tools:4.22.0 ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2022-01-16 14:57:01,bug,[DevTools Bug]: not sure if bug or not: devtools marks Youtube as built with react.,"### Website or app https://www.youtube.com/ ### Repro steps I was watching a video on youtube when I noticed the new video hover features which were not there on the 15th of January 2022. This then led me to the react dev tools which I noticed had turned blue, never had before. wanted to know of this is a bug or not. I have restarted my computer and browser severally. [](url ![tube](https://user-images.githubusercontent.com/65865227/149665223-b3243940-c1b0-418f-bfba-a8ca9eebb885.png) ) ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2022-01-14 23:20:34,bug,"[DevTools]: Confusing ""Why did this render?"" with hooks","### Website or app https://codesandbox.io/s/elegant-paper-5lhxd?file=/src/App.js ### Repro steps 1. visit https://5lhxd.csb.app/ 2. start recording profile 3. click a button (to update the context value) 4. check the report: ### Problem The list of hooks that were changed is **correct**. However, this list is not really the reason why this component has been rendered. The only thing that changed and led to this rerender is the context value. I think the list of changed hooks is useful but this should be listed separately. For the ""Why did this render?"" only context and state (and maybe useSyncExternalStore snapshots) should be listed. As only those actually cause rerenders. On a separate note - it's a bummer that contexts are not counted within the changed hooks list and the only report we get is that ""context has changed"". If I use multiple contexts in a component this information is often not enough because I can't easily check which context has been updated. ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2022-01-12 07:40:24,bug,"[DevTools Bug] Cannot add node ""6194"" because a node with that id is already in the Store.","### Website or app Code Sandbox app ### Repro steps 1. Clcik inspect from Google Chrome 2. Click components 3. it will show up this message ### How often does this bug happen? Sometimes ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.22.0-0229baee2 ### Error message (automated) Cannot add node ""6194"" because a node with that id is already in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26181:41 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24367:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24533:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53958:39) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2022-01-05 11:49:06,bug,"[DevTools Bug] Cannot add child ""34"" to parent ""33"" because parent node was not found in the Store.","### Website or app localhost ### Repro steps Just started profiler and reloaded the page ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.22.0-0229baee2 ### Error message (automated) Cannot add child ""34"" to parent ""33"" because parent node was not found in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26248:43 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24367:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24533:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53958:39) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add child to parent because parent node was not found in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-12-27 20:33:10,bug,"[DevTools Bug] Cannot add node ""1"" because a node with that id is already in the Store.","### Website or app It's empty project creating with 'react-native init' ### Repro steps 1. Start rn app in debug mode ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-core ### DevTools version (automated) 4.14.0-d0ec283819 ### Error message (automated) Cannot add node ""1"" because a node with that id is already in the Store. ### Error call stack (automated) ```text at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:140545 at c.emit (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:89515) at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:90986 at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347787 at Array.forEach () at S.Gc.e.onmessage (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347771) at S.n (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:40:3009) at S.emit (events.js:315:20) at e.exports.P (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:9318) at e.exports.emit (events.js:315:20) at e.exports.dataMessage (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:15409) at e.exports.getData (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:14651) at e.exports.startLoop (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:12066) at e.exports._write (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:11421) at doWrite (_stream_writable.js:403:12) at writeOrBuffer (_stream_writable.js:387:5) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-12-21 09:06:07,bug,"[DevTools Bug] Could not find ID for Fiber ""Route""","### Website or app null ### Repro steps I wrote a component using dhtmlxgantt: ```

``` initialized in this way: ``` useEffect(() => { gantt.init(ganttContent.current); gantt.parse(data); }, []); ``` ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) Could not find ID for Fiber ""Route"" ### Error call stack (automated) ```text at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:5836:11) at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7543:11) at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7712:21) at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8004:38) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:9837:56 at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4257:18) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10500:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11737:9) ``` ### Error component stack (automated) ```text at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38726:3) at Suspense at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5) at div at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3) at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40146:3) at div at div at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35254:3) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35695:3) at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42085:52) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37256:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3) at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43423:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41711:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30116:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30727:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37635:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53004:3) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Could not find ID for Fiber ""Route"" in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-12-16 00:54:41,bug,"[DevTools Bug] Cannot add node ""7184"" because a node with that id is already in the Store.","### Website or app just in my local machine ### Repro steps 1. Load page. 2. Open react components. ### How often does this bug happen? Only once ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) Cannot add node ""7184"" because a node with that id is already in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26134:41 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24349:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24509:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53230:39) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-12-15 20:20:58,bug,"[DevTools Bug] Could not find ID for Fiber ""App""","### Website or app not public ### Repro steps I have two code bases in a yarn workspaces linked monorepo. One is using react-three-fiber (the lib), and the other one is really thin wrapper around it with some simple UI, just couple of buttons. Both are using multiple (3) zustand stores. ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) Could not find ID for Fiber ""App"" ### Error call stack (automated) ```text at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:5836:11) at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7543:11) at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7712:21) at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8004:38) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:9837:56 at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4257:18) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10500:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11737:9) ``` ### Error component stack (automated) ```text at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38726:3) at Suspense at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5) at div at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3) at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40146:3) at div at div at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35254:3) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35695:3) at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42085:52) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37256:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3) at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43423:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41711:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30116:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30727:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37635:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53004:3) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Could not find ID for Fiber ""App"" in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-12-15 04:44:55,bug,Revert changes to react-devtools-inline Webpack config from PR #22760,Resolves #22958 facebook/react,2021-12-15 00:54:52,bug,[react-devtools-inline][4.22.0]: broken published package,"## Steps To Reproduce 1. install `react-devtools-inline` in a project that has `react` and `react-is` 2. open node 3. `require('react-devtools-inline')` 4. See error: ``` Uncaught: Error: Cannot find module '/Users/jstejada/code/jstejada-react/build/oss-experimental/react-is' Require stack: - /home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js - at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.14 (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:1344:18) at __webpack_require__ (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:21:30) at Object.3 (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:5710:17) at __webpack_require__ (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:21:30) at Object.10 (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:495:64) at __webpack_require__ (/home/avi/projects/temp/inlinetest/node_modules/react-devtools-inline/dist/backend.js:21:30) ``` ## The current behavior Published package contains the following code: ``` module.exports = require(""/Users/jstejada/code/jstejada-react/build/oss-experimental/react-is""); ... module.exports = require(""/Users/jstejada/code/jstejada-react/build/oss-experimental/react""); ``` ## The expected behavior No absolute paths in bundle. successful evaluation." facebook/react,2021-12-05 23:35:15,bug,"[DevTools Bug] Could not find node with id ""99"" in commit tree","### Website or app https://consumption.coffee/ ### Repro steps 1. Visit homepage 2. Start Profiler 3. Visit Coffee Page via navbar 4. Visit Home Page via navbar 5. Boom Error ### How often does this bug happen? Sometimes ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) Could not find node with id ""99"" in commit tree ### Error call stack (automated) _No response_ ### Error component stack (automated) ```text CommitRankedAutoSizer@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:44375:34 div div div SettingsModalContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:35694:40 Profiler_Profiler@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:52477:34 ErrorBoundary_ErrorBoundary@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:37092:5 div div ThemeProvider@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:37221:23 PortaledContent@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:37255:34 div div div ThemeProvider@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:37221:23 SchedulingProfilerContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:43422:45 ProfilerContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:41710:35 TreeContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:30115:31 SettingsContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:30726:35 ModalDialogContextController@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:37634:38 DevTools_DevTools@moz-extension://84945e53-7ac8-3442-9da2-ed4bcec5b8a4/build/main.js:53003:27 ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Could not find node with id in commit tree in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-11-26 00:52:17,bug,[DevTools Bug]: CDN-based site not working,"### Website or app https://lcdev.shaped.ca ### Repro steps Dev tools not working in FF or Chrome, says ""This page doesn't appear to be using react"". React is included via CDN as shown on react website https://reactjs.org/docs/cdn-links.html: `` `` Web Console on said page says: `` Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools `` ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2021-11-21 13:24:29,bug,[DevTools Bug]: Scheduling Profiler Tab Doesn't Show Up In DevTools,"### Website or app https://codesandbox.io/s/react-18-sandbox-0w6uk ### Repro steps 1. Open [this codesandbox](https://codesandbox.io/s/react-18-sandbox-0w6uk) 2. Open the app in new window 3. Open Profiler tab of the React DevTools _(ver 4.21.0-2f8f60ca8)_ 4. See no Scheduling Profiler icon ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2021-11-17 10:35:28,bug,React 18 Bug: Hydration mismatch if empty string is rendered," React version: 18.0.0-beta-4ff5f5719-20211115 ## Steps To Reproduce 1. Render empty string `ReactDOMServer.renderToString("""")` Link to code example: https://codesandbox.io/s/react-18-emptry-string-hydration-mismatch-xz4w9 Original issue: [`f9d729e` (#1541)](https://github.com/OperationCode/front-end/pull/1541/commits/f9d729e4070ce5ae178d1746fe470646652eaf3f#diff-887fe6affa5f7a2804ac12d95865452237617ee98d7342f1df8352cf641a70d4L90-R93) Did some spelunking in the codebase and it seems to me that the reconciler is looking for a hydrateable instance (https://github.com/facebook/react/blob/00ced1e2b7610543a519329a76ad0bfd12cd1c32/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L1413-L1415). But since an empty string won't appear as a text node (if we just set `innerHTML = string`), the reconciler thinks there's a mismatch. In legacy roots we didn't throw but warn **unless we had an empty string**: https://github.com/facebook/react/blob/75f3ddebfa0d9885ce8df42571cf0c09ad6c0a3b/packages/react-dom/src/client/ReactDOMComponent.js#L1202-L1208 ## The current behavior Console error is logged with ""An error occurred during hydration. The server HTML was replaced with client content"" ## The expected behavior No hydration mismatch just like in React 17: https://codesandbox.io/s/react-17-emptry-string-no-hydration-mismatch-forked-5tgmw " facebook/react,2021-11-15 10:16:20,bug,"[DevTools Bug] Cannot add node ""378218"" because a node with that id is already in the Store.","### Website or app private localhost ### Repro steps not sure ..... it happened when I recorded a new profile ### How often does this bug happen? Sometimes ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.20.0-e5f486b5a ### Error message (automated) Cannot add node ""378218"" because a node with that id is already in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25742:41 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23957:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24117:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:52741:41) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-11-10 02:20:05,bug,"[DevTools Bug] Cannot add child ""44"" to parent ""42"" because parent node was not found in the Store.","### Website or app https://github.com/I7RANK/holbertonschool-web_react ### Repro steps Hello, I hope you are great. 1. Make a git clone and go to `0x03-react_props/task_2/dashboard/` directory 2. Install the node_modules using `npm install` 3. Then execute `npm run start` 4. And go to http://localhost:8080/ 5. You need to install the React Developer Tools extension for Google Chrome (link [here](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)) 6. Open the Chrome DevTools by pressing `F12` 7. Now in the tabs of the new window opened by pressing `F12` choose the tab `Profiler` 8. And click on the `Reload and start profiling` button to see the error. See an example here and thanks in advance: ![React_developer_tools_Error](https://user-images.githubusercontent.com/65993425/141037229-fda4531e-822e-4b16-8e03-410f84321b8d.jpg) Also, I have other extensions just in case you need ![image](https://user-images.githubusercontent.com/65993425/141038103-37fa2313-b360-4cce-8208-d6b9f5866beb.png) and in another Google chrome profile that I tried, has these extensions ![image](https://user-images.githubusercontent.com/65993425/141038275-f8456a76-2890-4c01-86d4-da22bbe0a6fa.png) ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.21.0-2f8f60ca8 ### Error message (automated) Cannot add child ""44"" to parent ""42"" because parent node was not found in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26191:43 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24349:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24509:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53230:39) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot add child to parent because parent node was not found in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-11-03 15:37:15,bug,Named hooks parsing fails for certain Code Sandbox examples,"Noticed some parsing bugs when writing some example code for React conf. Taking this Sandbox... https://codesandbox.io/s/keen-bartik-udlpn?file=/src/App.js:58-341 --- This fails by loading neither hook: ```js function Example({ defaultName = ""-"", defaultLocation = ""-"" }) { const [name, setName] = useState(""-""); const [location, setLocation] = useState(""-""); return (

Name: {name}

Location: {location}

); } ``` --- Even worse, this fails by only loading ""location"" and showing it first (instead of state) ```js function Example({ defaultName = ""-"", defaultLocation = ""-"" }) { //asd const [name, setName] = useState(""-""); //asd const [location, setLocation] = useState(""-""); return (

Name: {name}

Location: {location}

); } ``` --- This ails by only loading the location hook, but at least the name shows beside the right hook: ```js function Example() { const [name] = useState(""-""); const [location] = useState(""-""); return (

Name: {name}

Location: {location}

); } ``` Interestingly, changing the order of the hooks _still_ only lets it load `location`, although it also still shows it as the second hook (bug). ```js function Example() { const [location] = useState(""-""); const [name] = useState(""-""); return (

Name: {name}

Location: {location}

); } ``` --- This format also only loads ""location"": ```js function Example(props) { const stateA = useState(null); const name = stateA[0]; const stateB = useState(null); const location = stateB[0]; return (

Name: {name}

Location: {location}

); ```" facebook/react,2021-10-26 16:59:53,bug,"[DevTools Bug]: ""Reload and start profiling"" button is missing on Microsoft Edge","### Website or app Any development URL are ok ### Repro steps 1. Open the React Developer Tools extension on Chrome and navigate to the Profiler tab. Note the presence of the ""Reload and start profiling"" button. 2. Open the React Developer Tools extension on Microsoft Edge and navigate to the Profiler tab. Note the absence of this button. I have checked #21384, and `document.featurePolicy.allowsFeature('sync-xhr')` returns `true`. ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) 4.20.2 ### Error message (automated) _No response_ ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_" facebook/react,2021-10-21 02:09:18,bug,"[DevTools Bug] Cannot remove node ""264"" because no matching node was found in the Store.","### Website or app https://codesandbox.io/ ### Repro steps i open chrome developer tools width react-developer-tool to view layout page and :v while i scroll page :v ### How often does this bug happen? Often ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 4.20.0-e5f486b5a ### Error message (automated) Cannot remove node ""264"" because no matching node was found in the Store. ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25851:43 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23957:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24117:12 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:52741:41) ``` ### Error component stack (automated) _No response_ ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot remove node because no matching node was found in the Store. in:title is:issue is:open is:public label:""Component: Developer Tools"" repo:facebook/react ``` " facebook/react,2021-10-19 22:09:48,bug,[DevTools Bug]: Loading / parsing hook names is failing on v4.20,"### Website or app reactjs.org ### Repro steps 1. Open a website that uses React. 2. Inspect an element that uses Hooks. 3. Attempt to load hook names. 4. Loading hook names always fails: ![image](https://user-images.githubusercontent.com/1271509/137997605-a3f601a9-59e5-4370-b307-3ff50af22cae.png) " facebook/react,2021-10-15 20:09:41,bug,[DevTools Bug]: Firefox and Edge show error in console about unrecognized installation on v4.20.0,"### Website or app reactjs.org ### Repro steps 1. Install React DevTools v4.20.0 in Firefox 2. Load reactjs.org in Firefox 3. Open Firefox DevTools 4. Observe error in console ![image](https://user-images.githubusercontent.com/1271509/137547605-e6ad3045-c20a-4828-9895-af46b8bb4db1.png) ### How often does this bug happen? Every time " facebook/react,2021-10-14 14:11:25,bug,Standalone Devtools splash page unresponsive after client disconnects ,"### Website or app Any client that connects to the standalone DevTools ### Repro steps While using the standalone DevTools app: 1. Connect a client to the DevTools 2. Disconnect that client and you should be redirected to the introduction page The event listeners are not re-attached to the splash page elements after the client disconnects. The ""` ([src code](https://github.com/facebook/react/blob/4c7036e807fa18a3e21a5182983c7c0f05c5936e/packages/react-devtools/app.html#L186-L194))，but my website is always https, so it will get broken because I cant change it to http if it's in `iframe`(it's diffcult to change the host environment/website protocol). I'm not familar with the react-devtools implementations, maybe something cause it can only use http to open the server, happy to hear the details, thanks! React-devtools: 3.6.3 " facebook/react,2020-04-22 15:00:02,feature,Improve UX of finding full `key` value,"## The current behavior The full value of the `key` is very difficult / impossible to find and use in the interface of the React Devtools. ![Kapture 2020-04-22 at 11 47 47](https://user-images.githubusercontent.com/1935696/79997715-25222680-84ba-11ea-97ba-51f1679a8c91.gif) Only managed to find it by accident :( ## The expected behavior The `key` is visible in the props list to the right. ### Detailed Proposal As mentioned below in https://github.com/facebook/react/issues/18702#issuecomment-617924196 Add a light divider and new section in the props panel to the right. Potentially also add a question mark that shows an explanation about the fact that things in this section are not really props. Ref (Original implementation): https://github.com/facebook/react-devtools/pull/328" facebook/react,2020-04-06 12:08:53,feature,Expose API like `createStyles` for converting style object to CSS string,"## Feature Request provide API on react-dom to convert style object to CSS string. the API could be used to build dynamic CSS easily. ### Approach 1 ```js import {createCSS} from 'react-dom' const inlineStyleString = createCSS({ overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, }) return ``` ### Approach 2 Another approach is to only map the key and value from the original style object, and let user play with it. ```js import {createStyles} from 'react-dom' // return a object with key-value pairs of css rules const cssStyleObject = createCSS({ WebkitTransform: 'scale(2)', }) // return { '-webkit-transform': 'scale(2)' } const inlineStyleString = Object.keys(cssStyleObject).reduce((serialized, key) => { serialized += `${key}: ${cssStyleObject[key]};` return serialized }, '') return ``` ## Why See other react styling library like **radium**, the way to build css is quite similar with react inline style if they need anything aligned with react like browser prefix such as `Webkit` or detect the unit less number for some special rule such as `line-height`, they have to re-implement the logic. the style object in react is quite convenient, but it's can only used for inline style. hope react team could consider to expose it in the react-dom. might not the origin function name, but the same functionality." facebook/react,2020-01-29 21:21:56,feature,Profiler should highlight host components (e.g. DOM elements) on mouseover,"Feature request from a DevTools user at Faceook: > If I mouse over a node in the flame graph if you can highlight it in the view like the inspector that would be really amazing!" facebook/react,2019-11-07 01:41:48,feature,Adding visible state to Suspense Fallback component to enhance CSS transitions.," **Do you want to request a *feature* or report a *bug*?** Feature I suppose. **What is the current behavior?** Suspense fallback component flashes on and immediately unmounts (flashes off) when fetching is complete. See similar discussions [here](https://stackoverflow.com/questions/57404653/react-suspense-prevent-flashing-of-fallback-spinner) and [here](https://stackoverflow.com/questions/54158994/react-suspense-lazy-delay). **What is the expected behavior?** It would be ideal to add better transitions to the fallback component when it mounts and unmounts, but doing so requires using something like [TransitionGroup](https://reactcommunity.org/react-transition-group/transition-group) or [Framer Motion](https://www.framer.com/api/motion/animate-presence/), which require a prop to listen to know when to mount and unmount. If we could somehow have the fallback component receive some kind of state from Suspense on when it is mounting and unmounting the fallback component, that would be great. " facebook/react,2019-10-10 05:08:30,feature,Make it easier to debug (undefined components) in production,"**Do you want to request a *feature* or report a *bug*?** Feature **What is the current behavior?** So for whatever reason, terser/minification causes a bug where one of my components is undefined during render. What I get is the standard production mode minified error. For some reason this time, I can't seem to do *any* of the following: 1. See any stack information for the component (React just says ""something somewhere is undefined"") 2. Set a breakpoint on the error point (for some reason with webpack + devtool sourcemap, chrome isn't letting me do a mid-line breakpoint at any place above the error) 3. Disable Reacts error catching temporarily so I can pause on the actual error 4. Use a development version of React with any ease but with the prod settings (I tried turning off both process.env.NODE_ENV checks but then you get an error `It is not supported to run the profiling version of a renderer (for example, react-dom/profiling) without also replacing the scheduler/tracing)` A big upgrade here would be to fix all of these (except 2, which is either a Webpack or Chrome bug). Can we get better stacks in production mode? That's the ideal. That with number 3 would be the most helpful: a query like `?disableNiceErrors=true` that prevents React from catching/re-throwing the error later would make it so much easier. As it is now, it's incredibly painful to debug (already an hour into it and without the breakpoints working on minified React it's hard to really even figure out where besides manual code commenting). Edit: A fifth would be source maps for react itself in production bundles which may work." facebook/react,2019-10-08 07:34:07,feature,"Add ""search"" functionality to Profiler graphs"," **Do you want to request a *feature* or report a *bug*?** feature **What is the current behavior?** it‘s hard for me to find a component in the profiler tab **What is the expected behavior?** add a search function,just like components tab " facebook/react,2019-09-27 12:02:35,feature,react-devtools: tiny feature request (copy to clipboard related),"Hey guys, great job with the new devtools 💯 perhaps this request can be put in the backlog for a future release as I think it could be quite useful and could save a few steps for developers. **What is the current behavior?** - Copying data to clipboard stringifies all key-value pairs of an object - When the keys' values happen to be objects or arrays, the values are given in constructor form rather than seeing the contents of that object/array This is what was copied: This is a pasted version in VSCode: **What is the desired behavior?** - When I click on ""Copy to clipboard"" in react-devtools, my copied object's data _keys_ and _values_ are in an unstringified format, or at least, I am presented the option to have this copied in an unstringified format - The _values_ of each key is readable, e.g: if the value is an object, I can see the expanded object and all its key-value pairs clearly as shown here (this is logged into Chrome console from react-devtools) " facebook/react,2019-08-22 16:46:40,feature,Devtools: Impossible to debug firefox webextension moz-extension: pages due to strict CSP," **Do you want to request a *feature* or report a *bug*?** * feature request * Original issue is: https://github.com/facebook/react-devtools/issues/922 * There are more details. * Mozilla's Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1573027 **What is the current behavior?** The react-devtools toolbar button does not light up and clicking on it says ""This page does not appear to be using react"". This is probably since extensions are not allowed to inject scripts into other extensions' pages. **What is the expected behavior?** The react-devtools toolbar button should light up and the addon should be able to debug the page **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** This is still reproducible * Firefox v68~ * react devtools v4.0.5 * react v16.9 " facebook/react,2019-08-22 12:29:14,feature,DevTools: Ability to save inspected values as global variable (as it was in previous version),"Hi, I really like new dev tools (4.0.5), but I would like to request one useful feature. In previous version it was possible to save inspected value (prop/state/context) and its parts as a global variable using context menu->store as global variable, so it can be easily be accessed through console using `$tmp{n}`. In current version this is behaviour was replaced be creating new ""bug"" button which will just print all values in console. Unfortunately it's hard to navigate through this object, because $_ in console will return undefined. And in order to access it you need to expand group, find desired property and open context menu->store as global variable. It would be perfect if you combine these 2 approaches so it would be possible to both print values using ""bug"" button and opening context menu directly in react dev tools panel wihtout need of intermediate step. Thanks! " facebook/react,2019-08-16 20:16:56,feature,New React Developer Tools does not clearly indicate empty object or array,"**Do you want to request a *feature* or report a *bug*?** Bug/unexpected behavior. **What is the current behavior?** When an object or array is empty, there's no arrow to expand and see that it's empty, nor is there an `(empty)` indication. Initially, I was concerned that I couldn't expand any object or array from the new React DevTools due to this. ![Screen Shot 2019-08-16 at 3 11 35 PM](https://user-images.githubusercontent.com/11951801/63195539-7aa75900-c038-11e9-95fe-4754f7d14693.png) **What is the expected behavior?** I would expect to either be able to expand the empty object, or to see `(empty)` next to the non-expandable object. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** Chrome version: 76.0.3809.100 (Official Build) (64-bit) React Developer Tools Version: 4.0.2 (8/15/2019) [Reference discussion on Twitter](https://twitter.com/taniarascia/status/1162441422496325633) " facebook/react,2019-08-16 15:42:33,feature,New React DevTools can't access immutable.js objects?," **Do you want to request a *feature* or report a *bug*?** Bug **What is the current behavior?** When the state or props are formed by Immutable.js objects, react devtools cannot expand it nor copy to temporal variable anymore. ![Screenshot from 2019-08-16 16-18-09](https://user-images.githubusercontent.com/28344917/63174215-c90d2580-c041-11e9-847c-7bbd153399f9.png) **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 (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:** https://codesandbox.io/s/withered-cherry-h3dfh **What is the expected behavior?** Be able to inspect the value of the immutable object or at least, copy it into a temporal variable. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** React 16.8.6 Chrome Version 70.0.3538.77 (Official Build) (64-bit)" facebook/react,2019-05-29 17:56:31,feature,DevTools in production environment ," ![2019-05-29_13-00](https://user-images.githubusercontent.com/33522235/58580030-d3254200-8211-11e9-882d-85da2664a3b2.png) **Do you want to request a *feature* or report a *bug*?** I think the production environment, React Devtools you should not show any information about the state or components. similar to redux Devtools. **What is the current behavior?** Just now I can Edit some information with React DevTools in the production environment " facebook/react,2019-04-18 09:59:04,feature,act() should warn in testing frameworks besides jest ,"**Do you want to request a *feature* or report a *bug*?** feature request **What is the current behavior?** The warnings for missing act() warnings around updates only happen in jest. **What is the expected behavior?** We should support other test runners/frameworks as well (like jasmine, karma, etc) **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** 16.8.0+" facebook/react,2019-04-09 15:36:48,feature,allow to disable style hydration missmatch warning,"some background: when dealing with inline styles (e.g. radium), SSR and caching of SSR results, you might run into problems because of differences in vendor prefixes. Best tradeof is to render always with all vendor prefixes on the server. But this will lead to style missmatches on hydration. You can use `suppressHydrationWarning`, but then you have to add this property to every element that receives these styles, which is not practical. **Do you want to request a *feature* or report a *bug*?** feature **What is the current behavior?** style missmatch causes a warning on development. **What is the expected behavior?** you can set a global flag to supress style missmatch warnings **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** React 16.8" facebook/react,2019-04-01 04:57:23,feature,useRef eslint rule proposal,"Proposal: Ensure that all reads from a `ref` use `.current`. ```js export function MyComponent() { const isActiveRef = useRef(false); // Proposal: this should be a linting violation if (isActiveRef) { console.log('will always be true'); } // Reads need to be done from .current if (isActiveRef.current) { console.log('correct usage'); } } ``` I often find myself doing boolean checks based on the `.current` value of a `ref`. I am paranoid that if I leave the `.current` off then I am creating a bug" facebook/react,2019-03-27 02:29:09,feature,Hook equivalent for `getSnapshotBeforeUpdate`," **Do you want to request a *feature* or report a *bug*?** Feature **What is the current behavior?** There is no hook based equivalent for `getSnapshotBeforeUpdate`. The docs state: > Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon. **What is the expected behavior?** There is a hook based equivalent for `getSnapshotBeforeUpdate`, maybe something like: ```js function ScrollingList(props) { const lengthRef = React.useRef(0); const listRef = React.useRef(null); const prevHeight = React.useSnapshot(() => { if (lengthRef.current < props.list.length) { const list = listRef.current; return list.scrollHeight - list.scrollTop; } }); React.useEffect(() => { lengthRef.current = props.list.length; }, [props.list.length]); React.useEffect(() => { if (prevHeight != null) { const list = listRef.current; list.scrollTop = list.scrollHeight - prevHeight; } }, [prevHeight]); return (

{/* ... */}

); } ``` This code probably is bug-ridden and not the best use of hooks but you get the idea. I’d like to know: 1. If this feature is planned or on the roadmap. 2. What the proposed API will be. 3. If anyone is working on this. Sorry, if this is being tracked somewhere and I haven’t seen it. I’m planning an intense component which will use `getSnapshotBeforeUpdate` and I’d love some guidance about the future of this lifecycle method. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** React v16.8.0 and later. All browsers and OSes. " facebook/react,2019-03-21 04:21:58,feature,[eslint-plugin-react-hooks] Add option to require functions from core hooks in dependencies," **Do you want to request a *feature* or report a *bug*?** feature **What is the current behavior?** The `react-hooks/exhaustive-deps` will currently accept either (and fix neither) of the following: ```javascript // Scenario A: Function returned by core hook IS NOT specified as a dependency. const [value, setValue] = useState(initialValue); const toggle = useCallback(() => setValue(v => !v), []); ``` ```javascript // Scenario B: Function returned by core hook IS specified as a dependency. const [value, setValue] = useState(initialValue); const toggle = useCallback(() => setValue(v => !v), [setValue]); ``` **What is the expected behavior?** If we add the following to our `.eslintrc.js` ``` // Introduces a `requireCoreFunctions` config option. 'react-hooks/exhaustive-deps': ['error', { requireCoreFunctions: true }] ``` then the rule should fail in scenario A, and fixing should result in scenario B. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** n/a" facebook/react,2019-03-11 02:26:13,feature,eslint-react-hooks: should we enforce to use React.useMemo if there is no state hooks?,"1. Regarding the performance optimization, should we always use React.useMemo in case there is no state hooks inside a function component? 2. If the answer is yes, can we use some eslint rules to make sure everyone do it?" facebook/react,2019-02-25 22:20:17,feature,Collapse forwardRef and other wrappers in React error stacks,"**Feature** **What is the current behavior?** With a UI kit that uses forwardRefs, I get error messages like this: ![image](https://user-images.githubusercontent.com/12100/53372321-61ceae00-3907-11e9-9d20-190315cc7f06.png) **What is the expected behavior?** It would look a lot better if forwardRefs were a bit less obtrusive, and if they picked up the functions displayName rather than just the name of the function they wrap. In our UI Kit we have a pattern like: ``` const View = forwardRef(function UIView(){ return

}) View.displayName = 'SomeDisplayName' ``` For some reason it's not showing that, just showing the inner one. Further the ""bigness"" of ForwardRef() makes it hard to see visually when scanning. Perhaps something more like this would help: ``` Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by ForwardRef(Gloss)) in Gloss (ForwardRef) in Gloss (ForwardRef) (created by OnboardMain) in div (created by Gloss (ForwardRef)) in Gloss (ForwardRef) in Gloss (ForwardRef) (created by SliderPane) ``` Further, the `created by` information is often more useful to me, but it's never aligned nicely. Could do something like: ``` Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by ForwardRef(Gloss)) in Gloss (ForwardRef) from OnboardMain: in Gloss (ForwardRef) from Gloss (ForwardRef): in div in Gloss (ForwardRef) from SliderPane: in Gloss (ForwardRef) ``` All together, if it would pick up displayNames, the stack would be far more readable for me: ``` Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by Row) in View (forwardRef) from OnboardMain: in Row (forwardRef) from Col (forwardRef): in div in Grid (forwardRef) from SliderPane: in View (forwardRef) ``` " facebook/react,2019-02-09 08:44:57,feature,Shallow renderer does not support React.memo,"**Do you want to request a *feature* or report a *bug*?** bug **What is the current behavior?** In normal rendering, you can memoize a class-based component: https://jsfiddle.net/586ea3cx/ With the shallow renderer, it seems like you can't: https://jsfiddle.net/odj217Lv/1/ This might be blocking https://github.com/airbnb/enzyme/pull/1914, in which tests are failing with `Cannot call a class as a function`. (it's tough to repro stuff with the shallow renderer)" facebook/react,2019-02-03 02:57:23,feature,Simultaneous key events in effect handled out of order,"**Do you want to request a *feature* or report a *bug*?** Report a bug. **What is the current behavior?** I have an app that's registering event listeners for `window`'s key events (via `useEffect`). Those event listeners are triggering state updates (via `useState`). I think I have found a bug where simultaneous key events occurring in the same frame (whether down or up) will be handled out of order, causing state to becoming out of sync. Take the following simple app (https://codesandbox.io/s/1z3v9zrk4j). I've kept this as keyup only for simplicity. ``` function App() { const [keys, setKeys] = useState([]); console.log('App', keys); const onKeyUp = function (event) { console.log('onKeyUp', event.key, keys); setKeys([...keys, event.key]); }; useEffect(function () { console.log('effect', keys); window.addEventListener('keyup', onKeyUp); return function () { console.log('removing event listener', keys); window.removeEventListener('keyup', onKeyUp); }; }); return

{keys.join(', ')}

; } ``` If I press down any two keys, e.g. the ""q"" and ""w"" keys, and then release them at precisely the same time, the following happens: - The `keyup` event listener for `w` is called, which in turn calls `setKeys` with `['w']` - `App` is re-rendered with `keys === ['w']` - The `keyup` event listener for `q` is called, which in turn calls `setKeys` with `['q']` - The effect's cleanup function is called, removing the event listener with `keys === []` - The effect is run again, the event listener being added with `keys === ['w']` - `App` is re-rendered with `keys === ['q']` - The effect's cleanup function is called, removing the event listener with `keys ===['w']` - The effect is run again, the event listener being added with `keys === ['q']` This results in `keys === ['q']`. The render with `w` has been lost. With three keys, only two keys are reliably shown. Four keys - only two are reliably shown. If I add another `useState` call, the first `useState` has no issues - all keys are reliably detected. See https://codesandbox.io/s/0yo51n5wv: ``` function App() { const [keys, setKeys] = useState([]); const [dummy, setDummy] = useState('foo'); console.log(""rendering App"", keys); const onKeyUp = function(event) { console.log(""onKeyUp event received"", event.key, keys); setKeys([...keys, event.key]); setDummy('foo'); }; useEffect(function() { console.log(""adding event listener"", keys); window.addEventListener(""keyup"", onKeyUp); return function() { console.log(""removing event listener"", keys); window.removeEventListener(""keyup"", onKeyUp); }; }); return (

Keyups received:

{keys.join("", "")}

); } ``` **What is the expected behavior?** I would expect the final state array to contain all keys released, in order. There are a few workarounds for this issue (e.g. passing a function to `setState` to retrieve the current value instead of using the rendered value), but from the documentation it seems that is an escape hatch for use when the effect's callback is not renewed on each state change, and should not be necessary in this case (unless I've misunderstood). **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** It happens on both versions that support hooks - `16.8.0-alpha.0` and `16.8.0-alpha.1`. This is on Chrome/Safari/Firefox on MacOS Mojave. " facebook/react,2019-01-30 10:43:37,feature,Allow the same DOM node to use both a callback and a RefObject in its ref prop,"**Do you want to request a *feature* or report a *bug*?** Feature **What is the current behavior?** The `ref` attribute passed to a DOM node can be either a callback or a `RefObject`, but not both. Sometimes, that's exactly what's required: for example, a library like [react-pose](https://popmotion.io/pose/api/posed/#posed-usage-create-a-posed-component-existing-components) demands ref forwarding to work with a React Component, but you'd also like to retain a reference to the _same_ parent DOM node within that component itself for a different reason. It's often not possible to nest DOM nodes to achieve a similar thing using two different ref attributes as that breaks layout. Here's a link to a naive attempt to achieve this: https://codesandbox.io/s/4jyw3q3v57 I'm not surprised this doesn't work as there's no reason for the parent ref callback to fire, but I don't know how else to go about it. **What is the expected behavior?** The callback provides the component with its own reference to the parent DOM node, whilst also providing it to the parent component via the passed `RefObject`. " facebook/react,2019-01-05 22:14:39,feature,React.Suspense provide a lifecycle so components can handle the `display:none` removal,"**Do you want to request a *feature* or report a *bug*?** It's a feature. **What is the current behavior?** React.Suspense mounts its children with a `display: none` style if a promise is thrown. Once the thrown promise is resolved, React removes the `display: none` style. **What is the expected behavior?** The children components have no easy way to know when the `display: none` style is removed by React. This is problematic when one child component needs to read from the DOM layout to correctly display its elements. Most people wait for the `componentDidMount` callback to trigger, but because the element is `display: none`, it can't read any value from the DOM layout. The issue was discovered in https://github.com/mui-org/material-ui/issues/14077. I believe that React should provide a lifecycle so the children components know when they are visible, that it's safe to do layout computations. The best workaround I'm aware of it to use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) but it requires a polyfill on IE 11 and Safari. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** Version: 16.7.0-alpha.2" facebook/react,2018-12-15 20:58:16,feature,[Hooks] Proposal: expose info about current component for custom hooks," **Do you want to request a *feature* or report a *bug*?** feature **What is the current behavior?** The core built-in hooks – `useRef`, `useMemo`, etc. – rely on internal React state which is not exposed, namely the current rendering component. This means that these hooks cannot be implemented in user-land. Similar hooks cannot be implemented either. I'm proposing adding a built-in hook which would provide information about the current rendering component. This would enable more advanced hooks to be implementable in user-land. I have a use case which is a perfect example. I need a hook similar to `useMemo`, but where the computed value is shared across all components of the same type. I’m calling it `useSharedMemo`. The ideal API would look something like this: ```typescript const Component = ({cacheKey}) => { const value1 = useSharedMemo(() => /* expensive computation 1 */, [cacheKey]); const value2 = useSharedMemo(() => /* expensive computation 2 */, [cacheKey]); return <>{value1} {value2}; }; ``` In the code above, every instance of `Component` would get the same values for `value1` and `value2`, provided `cacheKey` is the same. When `cacheKey` changes, the two values would recompute once and the new values would be returned to all instances as they re-render. (The actual use case in my app is styles that need to update only when the theme changes.) I have a [hacky implementation](https://codesandbox.io/s/jplyz2pkr9) of this hook that works, but it requires changing the API to the following: ```typescript const useSharedMemo = createUseSharedMemo(); const Component = ({cacheKey}) => { const ref = React.useRef(); const value1 = useSharedMemo(ref, () => /* expensive computation 1 */, [cacheKey]); const value2 = useSharedMemo(ref, () => /* expensive computation 2 */, [cacheKey]); return <>{value1} {value2}; }; ``` For this to work, the [implementation](https://codesandbox.io/s/jplyz2pkr9) has to keep a counter of calls that resets every time a component’s render call starts or ends. This would be trivial if there were a way to know which component is currently rendering. Since there is no way, the implementation has to make up for it by requiring a `ref` be passed in. Since it has no information about the type of the current component, it also requires that a `useSharedMemo` “instance” be created in the component definition’s enclosing scope. Worse, the implementation uses `useLayoutEffect` to detect when the render is done, which might break with concurrent mode or with future React changes. **What is the expected behavior?** If React provided information about the current rendering component, the implementation of `useSharedMemo` would be much easier and less brittle. A possible solution is a hook like the following: ```typescript const [currentType, currentRef] = React.useCurrentComponent(); ``` With this information, we can implement the ideal API above and we do not have to rely on `useLayoutEffect`: ```typescript let values = new WeakMap(); let cacheKeys = new WeakMap(); let lastRef = null; let callIndex = 0; function useSharedMemo(fn, keys) { const [currentType, currentRef] = React.useCurrentComponent(); if (currentRef !== lastRef) { callIndex = 0; } const index = callIndex; callIndex++; const typeValues = values.get(currentType) || []; const typeCacheKeys = cacheKeys.get(currentType) || []; if (!typeValues[index] || !compareKeys(keys, typeCacheKeys[index])) { typeValues[index] = fn(); typeCacheKeys[index] = keys; values.set(currentType, typeValues); cacheKeys.set(currentType, typeCacheKeys); } return typeValues[index]; } ``` (Note that I’m treating `currentType` and `currentRef` as opaque values, so for my purposes it doesn’t matter if they are the actual type and an actual ref to the component instance. I imagine having them be accurate would be a more powerful API, but the implementation might require them to be opaque values.) P.S. - A common use case that would benefit from `useSharedMemo` is `useCallback`. 99% of the time callbacks are identical across components of the same type. It’s wasteful not to share the cache. **Demo** https://codesandbox.io/s/jplyz2pkr9 " facebook/react,2018-12-03 01:04:57,feature,[Scheduler] Add support for delayed scheduling of callbacks.,"Has the React team considered adding the ability to specify a time delay when scheduling callbacks on Scheduler. This would be useful to enable using Scheduler as a general scheduling solution in a JS environment, removing the need to use and manage setTimeouts/setInterval calls. " facebook/react,2018-11-20 13:47:08,feature,Provide a way to pass context to renderToStaticMarkup on the client,See https://github.com/facebook/react/issues/14287#issuecomment-440277999 and https://github.com/facebook/react/pull/14182#issuecomment-440125029. This accidentally worked for a few releases but was a bug. However we might want to consider actually supporting this with an opt-in API. facebook/react,2018-11-16 18:02:00,feature,React.lazy does not allow retrying a rejected promise,"**Do you want to request a *feature* or report a *bug*?** It can be seen as a feature or a bug, depending on angle. Let's say it's an enhancement to how `lazy` works. **What is the current behavior?** When using `React.lazy`, if the given promise rejects while trying to asynchronously load a component, it's no longer possible to retry loading the component chunk because `lazy` internally caches the promise rejection. **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 (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:** This does not seem to work great in CodeSandbox because it's using service workers, which get in the way when simulating offline mode, yet this small app illustrates the issue: https://codesandbox.io/s/v8921j642l **What is the expected behavior?** A promise rejection should not be cached by `lazy` and another attempt to render the component should call the function again, giving it the chance to return a new promise. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** AFAIK all version of React that include `lazy`. " facebook/react,2018-11-13 17:57:45,feature,setState/dispatch 2nd arg callback or emitEffect() use case,"# Feature Request ## Current Behavior useState/useReducers Hook's updater/dispatch functions do not expose a way to execute code _after_ the update has been made. ## Expected Behavior useState or useReducer Hooks expose some way to locally execute the equivalent of inline useEffect/didUpdate etc. (to allow for overriding default side effect behavior) (e.g. emitEffect(() => ...)). ## Use Case Formik exposes 2 props which control when form validation occurs: `validateOnChange` and `validateOnBlur`. When `validateOnChange` set to `true`, form validation will run whenever `handleChange`, `setFieldValue`, or `setValues` are called (these fns all update form `values`). Similarly, when `validateOnBlur` is `true`, validation will also run whenever `handleBlur`, `setFieldTouched`, and `setTouched` are called (these fns all update the `touched` state of the form). The reason that Formik doesn't centralize orchestrating validation logic into `componentDidUpdate` (i.e. run validation whenever either `this.state.values` or `this.state.touched` changes) is to allow for local overrides in custom input components. For example, often times in a 3rd party input component (e.g. like Airbnb's Rheostat (https://github.com/airbnb/rheostat)) the value and touched state need to update together because there isn't a real ""blur"" event for the component or there isn't a prop for it. With Formik, you get around this by updating the field's value and touched state imperatively but override the validation behavior to only run once. To do this, Formik's current non-hooks API exposes an extra parameter to the `setFieldValue` and `setFieldTouched` methods which allow you to opt out of running validation after the update is made. Internally this looks like: ```js setFieldValue(name, value, shouldValidate = true) { this.setState(prevState => setIn(prevState.values, name, value), () => { if (this.props.validateOnChange && shouldValidate) { this.validateForm(this.state.values) } }) } setFieldTouched(name, touch = true, shouldValidate = true) { this.setState(prevState => setIn(prevState.touched, name, touch), () => { if (this.props.validateOnBlur && shouldValidate) { this.validateForm(this.state.values) } }) } ``` If a callback was supported by either `useReducer`'s `dispatch` or `useState` update fn, Formik could maintain its current API footprint and allow for the following code to work as expected: ```js const CustomRangedInput = (props) => { const formik = useFormikContext(); function handleChangeValue(value) { // Set the value formik.setFieldValue(props.name, value, false /* avoid normal validation logic */) // Mark the field as touched formik.setFieldTouched(props.name, true) } return ; } ``` However, with the current hooks API's there is not a way for me to expose this to users, since I have to lift update the validateOnChange/validateOnBlur validation logic to `useEffect`. In my current Formik x Hooks PR, this looks like ```js React.useEffect( () => { if (!!didMount.current && !!validateOnChange && !state.isSubmitting) { validateForm(state.values); } }, [state.values, validateOnChange, state.isSubmitting] ); React.useEffect( () => { if (!!didMount.current && !!validateOnBlur && !state.isSubmitting) { validateForm(state.values); } }, [state.touched, validateOnBlur, state.isSubmitting] ); ``` This will execute whenever `state.values` or `state.touched` change, which is usually what people want 98% of the time. However, I don't know/see a way to make this compatible with the old API (where you can locally override validation). **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** 16.7.0-alpha " facebook/react,2018-11-02 08:27:15,feature,

Test

This headline hydrates fine.

💥 This element after the suspending Component triggers an error (only in development).