FAQ

Why does the caret on my input jump when syncing with the tree?

First of all you might consider not doing this. It is very unlikely that something else in your application needs to know about every single keypress to an input. It is recommended to move the value of the input into the tree when it actually is required.

If you do want to update on each keypress though, you have to commit the change, unless you have set asynchronous: false in your options.

var tree = new Baobab({
  inputValue: null
});

var Input = React.createClass({
  mixins: [tree.mixin],
  cursors: {
    value: ['inputValue']
  },
  onChange: function(event) {
    this.cursors.value.edit(event.target.value);
    tree.commit(); // synchronous commit to tree
  },
  render: function() {
    return <input onChange={this.onChange} value={this.state.cursors.value} />;
  }
});

My tree data seems to be out of sync?

TL;DR: Don't mutate things in your baobab tree. Let it handle its own mutations.

For performance and size reasons baobab does not (yet?) use an immutable data structure. However, because it aims at producing a one-way data flow for your application state (like React would at component level), it must be used like an immutable data structure.

For this reason, don't be surprised if you mutate things and break your app.

// This is bad:
var users = tree.get('users');
users[0].name = 'Jonathan';

// This is also bad:
var o = {hello: 'world'};
tree.set('key', o);
o.hello = 'other world';