[Bug] Component are re-rendered even if not needed

[titouancreach]

Given 2 very simple child components

MyInput.jsx

export default {
  props: ['update', 'value'],
  
  render(h) {
    return (
      <div>
       <input value={this.value} onInput={this.update} />
      </div>
    );
  }
};

and
Foobar.jsx

export default {
  updated() {
    console.log('FOOBAR is updated');
  },

  render(h) {
    return (
      <div>
       FOOBAR
      </div>
    );
  }
};

And the wrapper component:

export default {
  data: () => ({
    value: 'myval'
  }),

  methods: {
    update(v) {
      this.value = v;
    }
  },
  
  render(h) {
    return (
      <div>
       <MyInput value={this.value} update={this.update} />
       <Foobar />
      </div>
    );
  }
};

Each time my value in the input is updated, then, the message: FOOBAR is updated is displayed.
It make no sence to re-render FooBar component that depends on no props.

Template version doesn't rerender Foobar:

<template>
  <div>
    <MyInput :update=update :value=value />
    <FooBar />
  </div>
</template>

FOOBAR is updated is not displayed.

The h version also work:

render(h) {
  return h('div', [
    h('FooBar'),
    h('MyInput', {props: {value: this.value, update: this.update}})
  ]);
};

That look very weird because I thought the JSX version compile into my h version. This bug makes all my child components to be rerender even if they don't need.

Update: I noticed that:

  h('Foobar', [])

Display the message whereas

  h('Foobar')

Work as expected.
I don't know why the behavior is different in this case, I'll also open an issue in Vue.

[LinusBorg]

Please provide a repository with a runnable reproduction. We can't rely on re-building your example to find the bug we have, or mistake you did.

Edit: If the plugin actually produces this code: h('Foobar', [])thenmy idea for the bug source would be something like: The empty array makes Vue send a new empty slot content to the child everytime, triggering a re-render. Which would be a bug in this lib (for creating an empty array in the first place) and for Vue (for triggering a re-render with an empty array)

But a repository is needed to reproduce the circumstances you have for your test.

[titouancreach]

Here is a repro: https://codepen.io/anon/pen/dJpomx?editors=1011. I'm creating an issue in the vue repo. I link the issue asap. Thanks

Edit: vuejs/vue#7300

[titouancreach]

This PR should fix the issue right ? #103

[nickmessing]

It produces:

  render: function render(h) {
    return h(
      'div',
      null,
      [h(MyInput, {
        attrs: { value: this.value, update: this.update }
      }), h(Foobar, null)]
    );
  }

so no empty array is created, I have no idea why it re-renders 😄

[LinusBorg]

It seem to me that #92 should have fixed that..

[nickmessing]

@LinusBorg, it would fix if it was "empty array" problem, but it's not 😢

[titouancreach]

Are you interested in a git repo to test it? here is one
yarn && yarn run dev to start

[titouancreach]

@nickmessing Are you sure it produces the code of your comment ?

  render: function render(h) {
    return h(
      'div',
      null,
      [h(MyInput, {
        attrs: { value: this.value, update: this.update }
      }), h(Foobar, null)]
    );
  }

Because changing the render function to this on the pen doesn't update Foo, whereas the repository does.

Here is the component extracted from the bundled version of the repro repository:

exports.default = {
  name: 'MyView',

  components: {
    Foobar: _Foobar2.default,
    MyInput: _MyInput2.default
  },

  data: function data() {
    return {
      value: 'Test'
    };
  },

  methods: {
    update: function update(v) {
      this.value = v;
    }
  },

  render: function render() {
    var h = arguments[0];

    return h(
      "div",
      null,
      [h(
        "div",
        null,
        ["REPRODUCTION"]
      ), h(
        _MyInput2.default,
        {
          attrs: { value: this.value, update: this.update }
        },
        []
      ), h(
        _Foobar2.default,
        null,
        []
      )]
    );
  }
};
},{"./Foobar.jsx":4,"./MyInput.jsx":5}],2:[function(require,module,exports) {
"use strict";

Foo bar does have an empty child.

[titouancreach]

Maybe the problem is just that the PR that has been merged to master, has not been published on NPM ?
Commit history and NPM shows that the last NPM version is 3.5.0 (pushed in 6 month ago). My reproduction repository use the NPM version (without the PR merged).
In this case, we just need to publish the new version to NPM.

[andtii]

Any updates in this issue? Im runnibg the latest vue version but has this issue aswell!

[sant123]

The version 3.5.1 has been released on NPM 9 days ago, do you still have this issue @titouancreach?

[titouancreach]

I updated the repro repository with the new version:

• https://github.com/titouancreach/repro-babel-plugin-transform-vue-jsx--115
  Foo is not re-rendered anymore, looks good to me!

I close the issue.

Thanks, you rocks!