[Fast Refresh] Support callthrough HOCs

[gaearon]

Fixes #20417.

See explanation of the problem in #20417 (comment). The fix I settled on (see next commits) is to add signatures to all HOC wrappers above, not just the inner function. If they already had signatures, they would be ignored. But if not, this is our chance to tag them so that if they call our component as a function directly (instead of rendering it), we take its list of Hooks into account.

This still won't solve the problem for more convoluted cases, like if you're developing a HOC that does callthrough. Because then the transform will for it too, and fill its signature first. But that seems like a reasonable compromise since the whole pattern is shady. Let's just get the MobX case working.

[sizebot]

Comparing: 1b7e471...00178db

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	122.93 kB	122.93 kB	=	39.53 kB	39.53 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	129.45 kB	129.45 kB	=	41.61 kB	41.61 kB
facebook-www/ReactDOM-prod.classic.js	=	407.25 kB	407.25 kB	=	75.66 kB	75.67 kB
facebook-www/ReactDOM-prod.modern.js	=	395.51 kB	395.51 kB	=	73.72 kB	73.72 kB
facebook-www/ReactDOMForked-prod.classic.js	=	407.25 kB	407.25 kB	=	75.67 kB	75.67 kB
oss-experimental/react-refresh/cjs/react-refresh-babel.production.min.js	+3.92%	7.20 kB	7.48 kB	+3.14%	2.58 kB	2.66 kB
oss-stable/react-refresh/cjs/react-refresh-babel.production.min.js	+3.92%	7.20 kB	7.48 kB	+3.14%	2.58 kB	2.66 kB
oss-experimental/react-refresh/cjs/react-refresh-babel.development.js	+3.54%	24.12 kB	24.97 kB	+3.63%	5.51 kB	5.71 kB
oss-stable/react-refresh/cjs/react-refresh-babel.development.js	+3.54%	24.12 kB	24.97 kB	+3.63%	5.51 kB	5.71 kB
facebook-www/ReactFreshRuntime-dev.classic.js	+3.49%	21.62 kB	22.38 kB	+2.48%	6.38 kB	6.54 kB
facebook-www/ReactFreshRuntime-dev.modern.js	+3.49%	21.62 kB	22.38 kB	+2.48%	6.38 kB	6.54 kB
oss-experimental/react-refresh/cjs/react-refresh-runtime.development.js	+3.36%	21.52 kB	22.24 kB	+2.33%	6.36 kB	6.50 kB
oss-stable/react-refresh/cjs/react-refresh-runtime.development.js	+3.36%	21.52 kB	22.24 kB	+2.33%	6.36 kB	6.50 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-refresh/cjs/react-refresh-babel.production.min.js	+3.92%	7.20 kB	7.48 kB	+3.14%	2.58 kB	2.66 kB
oss-stable/react-refresh/cjs/react-refresh-babel.production.min.js	+3.92%	7.20 kB	7.48 kB	+3.14%	2.58 kB	2.66 kB
oss-experimental/react-refresh/cjs/react-refresh-babel.development.js	+3.54%	24.12 kB	24.97 kB	+3.63%	5.51 kB	5.71 kB
oss-stable/react-refresh/cjs/react-refresh-babel.development.js	+3.54%	24.12 kB	24.97 kB	+3.63%	5.51 kB	5.71 kB
facebook-www/ReactFreshRuntime-dev.classic.js	+3.49%	21.62 kB	22.38 kB	+2.48%	6.38 kB	6.54 kB
facebook-www/ReactFreshRuntime-dev.modern.js	+3.49%	21.62 kB	22.38 kB	+2.48%	6.38 kB	6.54 kB
oss-experimental/react-refresh/cjs/react-refresh-runtime.development.js	+3.36%	21.52 kB	22.24 kB	+2.33%	6.36 kB	6.50 kB
oss-stable/react-refresh/cjs/react-refresh-runtime.development.js	+3.36%	21.52 kB	22.24 kB	+2.33%	6.36 kB	6.50 kB

Generated by 🚫 dangerJS against 00178db

[gaearon]

This adds a bunch of duplication to the output. But the real one is hashed. Also it's only for HOCs which are out of favor. So meh.

[bvaughn]

Also it's only for HOCs which are out of favor. So meh.

Then again, isn't this change itself to support an even more uncommon use case (a HOC like pattern that directly calls a component as a function)?

[gaearon]

Well, HOCs are not that uncommon.

In the original case, we have a roughly 7% usage library which downright causes a crash every time a component is edited, in default setups with CRA/Next/RN. Pretty disruptive and they don't have a fix without giving up on the whole approach.

I'm just saying that the added output duplication does not make the remaining cases worse. It just slightly bloats the DEV-only output.

[gaearon]

ok I think this approach works

[yuhongda]

Fixes #20417.

See explanation of the problem in #20417 (comment). The fix I'm making here is to mark the outermost HOC return value with the signature instead of the passed function itself mark all levels of returned HOCs with the passed function's signature instead of only doing it for the function itself.

This is not an ideal fix though. Like, what if your HOC actually does render the inner type, but its own return value is not a component? E.g. an object like {Provider, Consumer}. Then we'll introduce the same exact problem we were trying to avoid, but for different (arguably just as exotic) cases. Because now those components wouldn't be remounted.

We could maybe tweak the contract so that each HOC call level gets the signature derived from the inner one. Although this won't work with our current heuristic of "first call to _s is the wrapper, second call is a signal to collect custom Hooks". That heuristic is pretty confusing anyway though and we could instead look at the arguments (no arguments = time to collect signatures). Maybe that would be a better fix.

Yeah it's better so I pushed that instead.

Great! Can’t wait to try it!

[bvaughn]

I looked at the new tests and the changed snapshots and they look good 👍🏼

I have not thought deeply about what types of edge-case patterns this change might break.

It don’t see how it would break render prop usage. I’d need a more specific example to explain why it doesn’t.

Normally I would want to test FR with these changes against a project with react-virtualized or something that makes use of other direct component calls (via render props) but I think that pattern would already be fundamentally broken b'c hooks wouldn't be allowed inside of a one-to-many render prop scenario like react-virtualized.

That being said, I wrote a test anyway where The row-render-prop functions returned a React element that itself used hooks, and that test failed (but also failed on master) so maybe that's fine 😁

[gaearon]

Let's give this a try. I fixed a corner case I found at FB but haven't seen other issues. Something like #21139 would be a better longer-term fix.

[Jack-Works]

Should I also implement this for react-refresh-typescript?

[gaearon]

Yeah I guess that would be nice.

[Jack-Works]

I'm porting this PR to the TypeScript version.
I aggressively detect if the function needs to be hashed appears at the callee position of the CallExpression (which means only literal IIFE ((() => {})(...args))) instead of allowing it appears in the argument position (memo(f)). Is that OK?

[gaearon]

Not sure I understand the question.

[Jack-Works]

So in this PR, it seems there are some irrelated (or false positive) changes in the snapshot:

https://github.com/facebook/react/pull/21104/files/00178dbaf7b5af453807a9d57724568b7c67759b?file-filters%5B%5D=.snap#diff-946346b4b3bb1833d001b16c63e3b733545cb5bbc651c2bfb25c37f664fd1a6dL40-R46

And in the TS version there are no such snapshot changes, only the new test case

while (item) {
    ;((item) => {
        useFoo()
    })(item)
}

I'd like to know if those changes are really false positive or I should port those behaviors to make it work correctly?

[Jack-Works]

I'll release it for now

[gaearon]

Why do you call these changes false positive? Can you describe what you expected vs what you saw?

[Jack-Works]

So as the PR title describes, it add support for IIFEs. But these baseline changes are not IIFEs, just a normal function call

[gaearon]

I think there's a misunderstanding.

The change in this PR has nothing to do with IIFEs. It only relates to higher-order components that call rather than render the passed function.

The IIFE test case is not something that's related to Hooks or Fast Refresh. It's just that we had a case like this in the codebase that was accidentally getting detected as a Hook call (because of the use prefix). My change broke the semantics of that code. So I added a regression test that verifies that code like this does not get broken.

[Jack-Works]

So what's the actual test case? Can you give a minimal example so I can fix that?

[gaearon]

The test showing incorrect output is d2a2045. Then 070262b shows the fix and the correct output.

[gaearon]

Concretely, the problem was that walking upwards was only correct as long as the inner node represents the argument. If the child node was the callee itself we should stop walking upwards.

[Jack-Works]

Implemented in https://github.com/Jack-Works/react-refresh-transformer/pull/5/files. but I still have some question about this PR posted in #21104 (comment)

[danieloprado]

I'm facing a stranger bug may related with this: vitejs/vite-plugin-react#6

When I change the styled doesn't change anything, I also tried a custom HOC and same thing happen. But when I change the syntax to make the const have the wrapped value of styled it worked.

NodePath {
  contexts: [
    TraversalContext {
      queue: [Array],
      priorityQueue: [],
      parentPath: [NodePath],
      scope: [Scope],
      state: undefined,
      opts: [Object]
    }
  ],
  state: undefined,
  opts: {
    _exploded: {},
    _verified: {},
    ImportDeclaration: { enter: [Array] },
    Program: { enter: [Array], exit: [Array] },
    JSXAttribute: { enter: [Array] },
    CallExpression: { exit: [Array] },
    ExportDefaultDeclaration: { enter: [Array] },
    FunctionDeclaration: { enter: [Array], exit: [Array] },
    VariableDeclaration: { enter: [Array] },
    ArrowFunctionExpression: { exit: [Array] },
    FunctionExpression: { exit: [Array] },
    JSXNamespacedName: { enter: [Array] },
    JSXSpreadChild: { enter: [Array] },
    JSXElement: { exit: [Array] },
    JSXFragment: { exit: [Array] },
    BlockStatement: { exit: [Array] },
    TSModuleBlock: { exit: [Array] }
  },
  _traverseFlags: 0,
  skipKeys: null,
  parentPath: NodePath {
    contexts: [ [TraversalContext] ],
    state: undefined,
    opts: {
      _exploded: {},
      _verified: {},
      ImportDeclaration: [Object],
      Program: [Object],
      JSXAttribute: [Object],
      CallExpression: [Object],
      ExportDefaultDeclaration: [Object],
      FunctionDeclaration: [Object],
      VariableDeclaration: [Object],
      ArrowFunctionExpression: [Object],
      FunctionExpression: [Object],
      JSXNamespacedName: [Object],
      JSXSpreadChild: [Object],
      JSXElement: [Object],
      JSXFragment: [Object],
      BlockStatement: [Object],
      TSModuleBlock: [Object]
    },
    _traverseFlags: 0,
    skipKeys: null,
    parentPath: NodePath {
      contexts: [Array],
      state: undefined,
      opts: [Object],
      _traverseFlags: 0,
      skipKeys: null,
      parentPath: [NodePath],
      container: [Array],
      listKey: 'body',
      key: 11,
      node: [Node],
      type: 'VariableDeclaration',
      parent: [Node],
      hub: [Object],
      data: null,
      context: [TraversalContext],
      scope: [Scope]
    },
    container: [ [Node] ],
    listKey: 'declarations',
    key: 0,
    node: Node {
      type: 'VariableDeclarator',
      start: 461,
      end: 1356,
      loc: [SourceLocation],
      id: [Node],
      init: [Node]
    },
    type: 'VariableDeclarator',
    parent: Node {
      type: 'VariableDeclaration',
      start: 455,
      end: 1357,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'const'
    },
    hub: {
      file: [File],
      getCode: [Function: getCode],
      getScope: [Function: getScope],
      addHelper: [Function: bound addHelper],
      buildError: [Function: bound buildCodeFrameError]
    },
    data: null,
    context: TraversalContext {
      queue: [Array],
      priorityQueue: [],
      parentPath: [NodePath],
      scope: [Scope],
      state: undefined,
      opts: [Object]
    },
    scope: Scope {
      uid: 14425,
      path: [NodePath],
      block: [Node],
      labels: Map(0) {},
      inited: true,
      bindings: [Object: null prototype],
      references: [Object: null prototype],
      globals: [Object: null prototype],
      uids: [Object: null prototype],
      data: [Object: null prototype] {},
      crawling: false
    }
  },
  container: Node {
    type: 'VariableDeclarator',
    start: 461,
    end: 1356,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    id: Node {
      type: 'Identifier',
      start: 461,
      end: 493,
      loc: [SourceLocation],
      name: 'LoginPage',
      typeAnnotation: [Node]
    },
    init: Node {
      type: 'ArrowFunctionExpression',
      start: 496,
      end: 1356,
      loc: [SourceLocation],
      id: null,
      generator: false,
      async: false,
      params: [Array],
      body: [Node]
    }
  },
  listKey: undefined,
  key: 'init',
  node: Node {
    type: 'ArrowFunctionExpression',
    start: 496,
    end: 1356,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    id: null,
    generator: false,
    async: false,
    params: [ [Node] ],
    body: Node {
      type: 'BlockStatement',
      start: 515,
      end: 1356,
      loc: [SourceLocation],
      body: [Array],
      directives: []
    }
  },
  type: 'ArrowFunctionExpression',
  parent: Node {
    type: 'VariableDeclarator',
    start: 461,
    end: 1356,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    id: Node {
      type: 'Identifier',
      start: 461,
      end: 493,
      loc: [SourceLocation],
      name: 'LoginPage',
      typeAnnotation: [Node]
    },
    init: Node {
      type: 'ArrowFunctionExpression',
      start: 496,
      end: 1356,
      loc: [SourceLocation],
      id: null,
      generator: false,
      async: false,
      params: [Array],
      body: [Node]
    }
  },
  hub: <ref *1> {
    file: File {
      _map: Map(0) {},
      opts: [Object],
      declarations: {},
      path: [NodePath],
      ast: [Node],
      scope: [Scope],
      metadata: {},
      code: "import { useCallback, useState } from 'react';\n" +
        '\n' +
        "import { useSelector } from 'react-redux';\n" +
        "import { Redirect } from 'react-router-dom';\n" +
        "import SwipeableViews from 'react-swipeable-views';\n" +
        '\n' +
        "import styled, { breakpoints, IStyledProp } from '@eduzz/houston-ui/styles/styled';\n" +
        '\n' +
        "import CreateForm from './Create';\n" +
        "import LoginForm from './Form';\n" +
        "import LoginRecoveryAccess from './RecoveryAcces';\n" +
        '\n' +
        "import { selectorIsAuthenticated } from '@/store/selectors';\n" +
        '\n' +
        'const LoginPage: React.FC<IStyledProp> = ({ className }) => {\n' +
        '  const [currentView, setCurrentView] = useState(0);\n' +
        '\n' +
        '  const isAuthenticated = useSelector(selectorIsAuthenticated);\n' +
        '\n' +
        '  const onLogin = useCallback(() => setCurrentView(0), []);\n' +
        '  const onRecoveryAccess = useCallback(() => setCurrentView(2), []);\n' +
        '  const onCreate = useCallback(() => setCurrentView(1), []);\n' +
        '\n' +
        "  if (isAuthenticated) return <Redirect to='/' />;\n" +
        '\n' +
        '  return (\n' +
        '    <div className={className}>\n' +
        "      <SwipeableViews index={currentView} height='100%'>\n" +
        "        <div className='step'>\n" +
        '          <LoginForm onRecoveryAccess={onRecoveryAccess} onCreate={onCreate} />\n' +
        '        </div>\n' +
        "        <div className='step'>\n" +
        '          <CreateForm onCancel={onLogin} />\n' +
        '        </div>\n' +
        "        <div className='step'>\n" +
        '          <LoginRecoveryAccess onCancel={onLogin} onComplete={onLogin} />\n' +
        '        </div>\n' +
        '      </SwipeableViews>\n' +
        '    </div>\n' +
        '  );\n' +
        '};\n' +
        '\n' +
        'export default styled(LoginPage)`\n' +
        '  margin: calc(${({ theme }) => theme.spacing(8)} * -1);\n' +
        '  background-color: red;\n' +
        '\n' +
        "  ${breakpoints.down('sm')} {\n" +
        '    margin: calc(${({ theme }) => theme.spacing(4)} * -1);\n' +
        '  }\n' +
        '\n' +
        '  & .step {\n' +
        '    padding: ${({ theme }) => theme.spacing(8)};\n' +
        '    max-width: 450px;\n' +
        '    margin: auto;\n' +
        '\n' +
        "    ${breakpoints.down('sm')} {\n" +
        '      padding: ${({ theme }) => theme.spacing(4)};\n' +
        '    }\n' +
        '  }\n' +
        '`;\n',
      inputMap: null,
      hub: [Circular *1]
    },
    getCode: [Function: getCode],
    getScope: [Function: getScope],
    addHelper: [Function: bound addHelper],
    buildError: [Function: bound buildCodeFrameError]
  },
  data: null,
  context: TraversalContext {
    queue: [ [Circular *2] ],
    priorityQueue: [],
    parentPath: NodePath {
      contexts: [Array],
      state: undefined,
      opts: [Object],
      _traverseFlags: 0,
      skipKeys: null,
      parentPath: [NodePath],
      container: [Array],
      listKey: 'declarations',
      key: 0,
      node: [Node],
      type: 'VariableDeclarator',
      parent: [Node],
      hub: [Object],
      data: null,
      context: [TraversalContext],
      scope: [Scope]
    },
    scope: Scope {
      uid: 14425,
      path: [NodePath],
      block: [Node],
      labels: Map(0) {},
      inited: true,
      bindings: [Object: null prototype],
      references: [Object: null prototype],
      globals: [Object: null prototype],
      uids: [Object: null prototype],
      data: [Object: null prototype] {},
      crawling: false
    },
    state: undefined,
    opts: {
      _exploded: {},
      _verified: {},
      ImportDeclaration: [Object],
      Program: [Object],
      JSXAttribute: [Object],
      CallExpression: [Object],
      ExportDefaultDeclaration: [Object],
      FunctionDeclaration: [Object],
      VariableDeclaration: [Object],
      ArrowFunctionExpression: [Object],
      FunctionExpression: [Object],
      JSXNamespacedName: [Object],
      JSXSpreadChild: [Object],
      JSXElement: [Object],
      JSXFragment: [Object],
      BlockStatement: [Object],
      TSModuleBlock: [Object]
    }
  },
  scope: Scope {
    uid: 14426,
    path: [Circular *2],
    block: Node {
      type: 'ArrowFunctionExpression',
      start: 496,
      end: 1356,
      loc: [SourceLocation],
      id: null,
      generator: false,
      async: false,
      params: [Array],
      body: [Node]
    },
    labels: Map(0) {},
    inited: true,
    bindings: [Object: null prototype] {
      className: [Binding],
      currentView: [Binding],
      setCurrentView: [Binding],
      isAuthenticated: [Binding],
      onLogin: [Binding],
      onRecoveryAccess: [Binding],
      onCreate: [Binding]
    },
    references: [Object: null prototype] {},
    globals: [Object: null prototype] {},
    uids: [Object: null prototype] {},
    data: [Object: null prototype] {},
    crawling: undefined
  }
}

This is the path output var from the src/components/Pages/Public/Login/index.tsx, as you can see the parentPath.type is VariableDeclarator so it is skip by the if (path.parent.type === 'VariableDeclarator')

[gaearon]

Can you please clarify by posting the exact minimal snippets that (1) work and (2) don't work?

[danieloprado]

Sure!

// Does not work
const Component =({ className }) => {
 return <div className={className}>hi!</div>
}

export default styled(Component)`
    background-color: red;
`

// Worked
const Component = styled(({ className }) => {
 return <div className={className}>hi!</div>
})`
    background-color: red;
`

// Worked
const component =({ className }) => { // <~ lowercase
 return <div className={className}>hi!</div>
}

// uppsercase
export default Styled(Component)` 
    background-color: red;
`

[danieloprado]

Here an example: https://stackblitz.com/edit/vitejs-vite-k3bzhu?file=src/Test.jsx

Try to change the background-color or try to change the parameter of the TestMyHoc. TestMyHocWorking is an example where refresh is working as expected, I think is because is not a call assignment.

[gaearon]

Does the same happen in CodeSandbox? Would be nice to check to see if this is Vite-specific.

[danieloprado]

It's not happening with react-scritps: https://stackblitz.com/edit/react-ptscnt?file=src%2FTest.jsx
only with Vite: https://stackblitz.com/edit/vitejs-vite-k3bzhu?file=src/Test.jsx

But when use HOC without a call assignment it works.

[gaearon]

If it's not happening with react-scripts then something is wrong with what Vite is doing so please report there.