Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mutating one prop recreates the whole window.xprops object

See original GitHub issue

I am passing a number of properties from parent to the child (the child is an iframe). Some of the props are primitives, some are arrays of objects.

I noticed that when I mutate one prop (e.g. a primitive one) then the whole window.xprops object is recreated, i.e. it becomes a completely new object. Since the child is a reactive app (Vue), rebuilding the array prop forces the child to rerender itself completely (the array contains data which is used to render some components). It would be best if props that are not explicitly mutated in the parent are not altered in window.xprops on the child.

Is this by design or can it be fixed?

My setup: I am using the Vue driver in the parent, and passing the props as props of the Vue component, e.g.:

<my-comp :selected-element="selectedElement" :document="document" />

selectedElement is a number and document is a nested structure (array of objects with children). So whenever selectedElement is updated in the parent, this forces window.xprops.document to be updated in the child as well, even though its contents are the same (it has not been changed in the parent).

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

ddenevcommented, Sep 30, 2020

@ogulcantumdogan, sure. First, I have to note that I’m using Zoid with an iframe (not popup).

On the parent side I create the Zoid Vue component and store it in Vuex with code like this (here createIframe is a Vuex action):

import * as zoid from 'zoid/dist/zoid.frameworks.js'
createIframe ({ commit }, clientUrl) {
  const zoidIframe = zoid.create({
    tag: 'zoid-iframe',
    url: clientUrl,
    dimensions: { width: '100%', height: '100%' }      
  }).driver('vue', Vue)
  commit('storeIframe', zoidIframe)

Then I have another Vue component (in the parent app) which I use as a wrapper for my Zoid component and to pass props and methods to the client Zoid component. Here is the <template> part of this Vue component:

  <!-- eslint-disable vue/attribute-hyphenation -->
  <component :is="iframe"
             :onEvent="handleEvent" />

here iframe is the actual Zoid component that was created and stored in Vuex above. Note how I pass props and methods (e.g. handleEvent) to the client but this is already well documented by the Zoid team.

Then in the client Vue app I just call zoid.create() in App.vue:

import * as zoid from 'zoid/dist/zoid.frameworks.js' 

  tag: 'zoid-iframe',
  url: ''

export default {

That’s pretty much it. Then, on the client, just use the code in my previous post if you need the reactivity.

Hope that helps. Good luck!

ddenevcommented, Sep 30, 2020

In the mean time, I’ll think about if and how zoid can handle this better.

BTW, @bluepnume, did you have a chance to think on how to add this reactivity to Zoid?

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - My component is mutating its props when it shouldn't be
I'm confused because as I modify the state in the app, I console log out the prop object and it's being modified simultaneously...
Read more >
When does React re-render components? - Felix Gerschau
Directly mutating the props object is not allowed since this won't trigger any changes, and React doesn't notice the changes.
Read more >
zoid example - KrakenJS
I just need to use window.xprops to get the props that are passed down. <!-- Pull in the login component we defined above...
Read more >
Refreshing Server-Side Props - Next.js - Josh W Comeau
One of my favourite features about Next.js is that individual routes can ... on demand, without doing a hard refresh of the whole...
Read more >
perl5120delta - man pages section 1: User Commands
The full range of the system's signed and unsigned integers is now ... Changes for this include: Perl can now handle every Unicode...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found