initialize function throwing Max call stack error with Array type about react HOT 5 CLOSED

Thanks for the reply. It still throw the Max call stack size error. Here's a sandbox showing the call stack: https://codesandbox.io/s/qkzwqyyvq

It seems to happen when set is called on the Array.

from react.

Here's an example where all I'm doing in the initialize function is a push:
https://codesandbox.io/s/qkzwqyyvq

initialize() {
    let x = this.posts.push({
      id: 1,
      content: "Shows maximum call stack boooooooo!!",
      complete: true
    });
    return x;
  }

It seems to only happen when working with an array type. Doing a set on a String or Number is working fine.

from react.

Thanks for the response. Yea I realized that if I passed in a default value to the state component, everything worked fine, so went with the assumption that it was required.

from react.

Hi Marques!

While Microstates has an API that can appear like it is changing the underlying objects, the actual objects themselves do not change when you make method calls. You always need to do something with the value, usually return it.

In this case, you need to do something with the intermediate values, because the object referenced by initialized is not actually changing when you call initialized.todos.set

export class TodoState {
  todos = [Todo];
  count = Number;

  initialize({ todos, count } = {}) {
    let initialized = this;
    let initializedTodos = initialized.todos.set([
      {
        id: Date.now(),
        text: "Initial Todo",
        complete: false
      }
    ]);
    let initailizedCount = initializedTodos.count.set(1);
    return initializedCount;
  }
}

or more concisely:

export class TodoState {
  todos = [Todo];
  count = Number;

  initialize({ todos, count } = {}) {
    return this;
      .todos.set([
        {
          id: Date.now(),
          text: "Initial Todo",
          complete: false
        }
      ])
      .count.set(1);
  }
}

Hope that helps!

from react.

Oops, I didn't see the problem with the stack error. This is something that is not properly documented in microstates, but if you are going to implement an initializer, you must provide a "base case", otherwise it will keep trying to wrap a new microstate over the new value that you returned, which then generates a new value on initializing, which then wraps a new microstate, which then wraps a new value and so on.

There are two ways around this. First, provide a "base case"

class Blog {
  posts = [Post];
  initialize() {
    if (this.posts.length > 0) {
      return this;
    } else {
      return this.posts.push({id: 1, content: "first post", complete: true});
   }
  }
}

Or, provide a "default value" for the posts when no posts have been provided.

class Blog {
  posts = create([Post], [{id: 1, content: 'first post', complete: true}]);
}

This value will be used whenever you create a Blog object without providing a value for the posts

create(Blog)  //=> uses default value
create(Blog, {posts: []}) //=> uses an empty list
create(Blog, {posts: [{id: '2', content: 'initial post'}]) //=> uses provided list

Hope that helps!

from react.