Intermittent autorun with controls

[davidsavoie1]

This one's pretty strange... I have a component which passes a value to a control by reference and calls an autorun if that value changes. However, it fires intermittently.

Usually, after I save changes to my files and code gets pushed to my live app, autoruns don't fire at all, but if I force reload the page, it does... sometimes! Not always! I sometimes need to press ctrl+F5 a couple of times before it works... And it's all or nothing.

I tried with an input field directly in the component, and it then always works, so it seems related to passing the value to the control first... Any suggestion? Thanks in advance.

ClientSearch({
  render() {
    return (
      <div>       
        <TestInput value={this.clientId} />
        Account name for {this.clientId()} is {this.account() ? this.account().name : ''}
      </div>
    );
  },

  clientId: ViewModel.property.string.default('').invalidMessage('Numéro de client invalide.'),
  account: undefined,

  autorun() {
    console.log('Autorun!');
    this.account(this.clientId() ? { name: 'FoundOne' } : undefined);
  },
});

TestInput({
  render() {
    return (<input type="number" b="value: value" />);
  },
  value: '',
});

[ManuelDeLeon]

I can't reproduce the problem so there's little I can do there.

One thing I can help you with is how you design your components. Whenever you listen for a change (in this case in an autorun) only to change/update a property which will be used by some other part of your app or component, stop because you're probably going about the hard way.

In this particular case you can, and should, drop the autorun:

ClientSearch({
  render() {
    return (
      <div>
        <TestInput value={this.clientId} />
        Account name for {this.clientId()} is <span b="text: account.name" />
      </div>
    );
  },
  clientId: ViewModel.property.string
    .default("")
    .invalidMessage("Numéro de client invalide."),
  account() {
    return this.clientId() ? { name: "FoundOne" } : {};
  }
});

[davidsavoie1]

Yeah, I guess you're absolutely right again. The autoruns seem to be the culprits here, and there's not much I can do to ensure that they behave exactly as I need them to... They keep working on and off, without much coherence. Using helpers directly is the way to go.

I was just a little concerned about referring to helpers all the time (hence my attempt with some autoruns), but maybe I don't get Meteor's reactivity fully. If I have a helper that fetches data from the database, say

circ: () => Circuit.findOne({ archived: false }, { sort: { startAt: -1 } })

If I refer to this prop often (if/unless bindings, values, text display, etc.), is the query repeated each time to the server or is the property value saved until its own value changes? I know it's a noob question, but it's the reason I got into trouble this time, ahah!

Thanks again for your help!

[ManuelDeLeon]

You shouldn't be loading a lot of data on the client so the rerun should be quick. If it isn't you can can cache the results. Lookup memoize.

On Sep 26, 2017 7:06 PM, "davidsavoie1" notifications@github.com wrote:

Yeah, I guess you're absolutely right again. The autoruns seem to be the culprits here, and there's not much I can do to ensure that they behave exactly as I need them to... They keep working on and off, without much coherence. Using helpers directly is the way to go.

I was just a little concerned about referring to helpers all the time (hence my attempt with some autoruns), but maybe I don't get Meteor's reactivity fully. If I have a helper that fetches data from the database, say

circ: () => Circuit.findOne({ archived: false }, { sort: { startAt: -1 } })

If I refer to this prop often (if/unless bindings, values, text display, etc.), is the query repeated each time to the server or is the property value saved until its own value changes? I know it's a noob question, but it's the reason I got into trouble this time, ahah!

Thanks again for your help!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ManuelDeLeon/viewmodel-react/issues/31#issuecomment-332378932, or mute the thread https://github.com/notifications/unsubscribe-auth/AED31htJvpOVsmbsad_MEJU8lLJqsuCYks5smZ-lgaJpZM4Pkk1S .