2035950 - devtools-reps is using React.createFactory, causes spammy warnings when running profiler tests

Status: RESOLVED FIXED

(DevTools :: General, task, P3)

Description

[Markus Stange [:mstange]]

In the profiler repo https://github.com/firefox-devtools/profiler , running yarn test gives some warnings of the following type:

 PASS  src/test/components/Root-history.test.tsx
  ● Console

    console.warn
      Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.

      20 |   getBackgroundColor,
      21 | } from '../../utils/colors';
    > 22 | import { ValueSummaryReader } from 'devtools-reps';
         | ^
      23 | import { TooltipCallNode } from '../tooltip/CallNode';
      24 | import { TooltipMarker } from '../tooltip/Marker';
      25 |

      at printWarning (node_modules/devtools-reps/node_modules/react/cjs/react.development.js:315:30)
      at warn (node_modules/devtools-reps/node_modules/react/cjs/react.development.js:278:5)
      at createFactoryWithValidation (node_modules/devtools-reps/node_modules/react/cjs/react.development.js:1827:7)
      at Object.<anonymous> (node_modules/devtools-reps/reps/custom-formatter.mjs:258:26)
      at Object.require (node_modules/devtools-reps/reps/rep.mjs:38:1)
      at Object.require (node_modules/devtools-reps/packageIndex.mjs:6:1)
      at Object.require (src/components/stack-chart/Canvas.tsx:22:1)
      at Object.require (src/components/stack-chart/index.tsx:11:1)
      at Object.require (src/components/app/Details.tsx:14:1)
      at Object.require (src/components/app/DetailsContainer.tsx:5:1)
      at Object.require (src/components/app/ProfileViewer.tsx:9:1)
      at Object.require (src/components/app/AppViewRouter.tsx:8:1)
      at Object.require (src/components/app/Root.tsx:14:1)
      at Object.require (src/test/components/Root-history.test.tsx:11:1)

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing, no plan on our side to move to a newer react version, but we can take a patch to migrate reps out of using createFactory.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

looks like it's only used in one place https://searchfox.org/firefox-main/rev/6087999d87e808ec39f260293afd6cc27b6c5944/devtools/client/shared/components/reps/reps/custom-formatter.mjs#258

const rep = createFactory(CustomFormatter);

would probably be easy to migrate

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2035950 - [devtools] Remove usage of React.createFactory in Reps. r=#devtools

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/4ce0eeb3c7f9
https://hg.mozilla.org/integration/autoland/rev/4facf24be5cc
[devtools] Remove usage of React.createFactory in Reps. r=devtools-reviewers,jdescottes

Comment 5

[amarc]

https://hg.mozilla.org/mozilla-central/rev/4facf24be5cc

Comment 6

[Markus Stange [:mstange]]

Thanks!