ReferenceError: calledOnce is not defined

[catamphetamine]

When used with react-hot-loader it throws this error

VM37389:13 Uncaught ReferenceError: calledOnce is not defined
    at ProxyComponent.result [as getDateFilterMinDateRefinement] (eval at __reactstandin__regenerateByEval (VM36190 CourseSearch.js:NaN), <anonymous>:13:5)
    at eval (eval at __reactstandin__regenerateByEval (VM36190 CourseSearch.js:NaN), <anonymous>:45:36)
    at ProxyFacade (react-hot-loader.development.js:647)
    at mountIndeterminateComponent (react-dom.development.js:13380)
    at beginWork (react-dom.development.js:13820)
    at performUnitOfWork (react-dom.development.js:15863)
    at workLoop (react-dom.development.js:15902)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)

getDateFilterMinDateRefinement() is a function that's wrapped in memoize().

The error happens, for example, when the component containing memoization is removed from code and then hit "Save" so that it hot-reloads.

[alexreardon]

I am a regular user of hot reloading and I have not experienced this issue.

There is something funny going in on that hot reload. Take a look at the code there is not much, and I cannot see how a variable (calledOnce) in a closure could be trashed. It sounds like there is something going on that is not respecting standard scoping which is a problem. regenerateByEval might be causing some issues as this might be losing the function scope of the returned function.

This feels like it is an issue with the hot reloader. Can you please post an example of how you are using memoizeOne? Cheers

[catamphetamine]

We're using it in constructor:

export default class CourseSearch extends Component {

  constructor() {
    super();
    // Re-rendering performance optimization.
    // But has a bug with `react-hot-loader`.
    this.getDateFilterMinDateRefinement = memoize(this.getDateFilterMinDateRefinement);
    this.getInstitutionFilterForSpecificInstitution = memoize(this.getInstitutionFilterForSpecificInstitution);
  }

  getDateFilterMinDateRefinement = min => ({ min })
  getInstitutionFilterForSpecificInstitution = institution => [institution]

  render() {
    return (

        <InstantSearchExcludePast
          ...
          defaultRefinement={this.getDateFilterMinDateRefinement(today + addDropDateShift)}
          today={today + addDropDateShift} />

        <InstantSearchMultiSelectList
          ...
          defaultRefinement={institution ? this.getInstitutionFilterForSpecificInstitution(institution) : undefined} />

    )
  }
}

The point is that while props stay the same by reference React doesn't re-render (probably, or maybe it still does).

I'll close this for now, as it seems like an our way of writing code + hot-loader + memoizeOne all combined in a single use case.

[nihgwu]

I'm encountering exactly the same problem, do you find a solution @catamphetamine

[catamphetamine]

No, I just dropped ‘memoize-one’ in favour of hot-reload.

…

On Thu, 6 Sep 2018 at 15:35, Neo ***@***.***> wrote: I'm encountering exactly the same problem, do you find a solution @catamphetamine <https://github.com/catamphetamine> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#28 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAdH7-KmVyg-k9YiHtUC8islBxyOmFx8ks5uYRZ6gaJpZM4VwpiE> .

[nihgwu]

Right now I have to workaround like this this.method = module.hot ? this.method : memoize(this.method)

[nihgwu]

So if this problem still exists, I'd suggest to reopen the issue, no matter what's the root cause, but we have to find the reason

[alexreardon]

memoize-one is just a function that returns a new function: a simple higher order function. It looks like the scope of the returned function is being lost in a hot reloading process. This is a problem with the hot reloader as no scope should be destroyed.

It looks like this is the cause: gaearon/react-hot-loader#978

[alexreardon]

Happy to reopen but it looks like the issue is not with this library, but with the hot reloaders ability to deal with higher order functions

[nihgwu]

@alexreardon thanks for the context, it's really helpful, I can confirm the error is gone after upgrade react-hot-loader to ^4.3.0, but seems the memoized function won't be reloaded any more, but that's not the problem of this library (UPDATE: that's intended gaearon/react-hot-loader#1002)

Thanks for your great library 👍 , I think it's good to close now, but change the label to question in case the others meet the same problem