Using MobX useLocalObservable with React Component Props

[codeBelt]

What is the best way to send React component props to useLocalObservable in MobX 6? I am going to write an article and I want to figure out a nice way to handle this.

In MobX 5 you would pass the props via the source parameter of useLocalStore like:

// Child.store.js
export const ChildStore = (source) => ({
  parentStore: source.parentStore,

  get myGetter() {
    return this.parentStore.someProperty.map(/* do complicate stuff */);
  },
});

// Child.jsx
export const Child = observer((props) => {
  // passing props via the source parameter of useLocalStore
  const childStore = useLocalStore(ChildStore, {
    parentStore: props.parentStore,
  });

  return <div>{childStore.myGetter.map(/* render out components */)}</div>;
});

In MobX 6 I think the solution is to use useEffect to pass the props to the store? I am not a fan of this way because the first render of the Child component the parentStore will be null in the ChildStore. This means I need to return an empty array in myGetter on the first render.

// Child.store.js
export const ChildStore = () => ({
  parentStore: null,

  get myGetter() {
    if (!this.parentStore) {
      return [];
    }

    return this.parentStore.someProperty.map(/* do complicate stuff */);
  },

  init(parentStore) {
    this.parentStore = parentStore;
  },
});

// Child.jsx
export const Child = observer((props) => {
  const childStore = useLocalObservable(ChildStore);

  useEffect(() => {
    childStore.init(props.parentStore);
  }, []);

  return <div>{childStore.myGetter.map(/* render out components */)}</div>;
});

The solution I want to validate with the mobx community is to wrap my store with another function. This way I can pass in the component props when the store gets created within useLocalObservable. Is this a better solution than the one above?

// Child.store.js
export const ChildStore = (storeProps) => {
  return () => ({
    parentStore: storeProps.parentStore,

    get myGetter() {
      return this.parentStore.someProperty.map(/* do complicate stuff */);
    },
  });
};

// Child.jsx
export const Child = observer((props) => {
  const childStore = useLocalObservable(
    ChildStore({
      parentStore: props.parentStore,
    })
  );

  return <div>{childStore.myGetter.map(/* render out components */)}</div>;
});

I would love some feedback and/or other approaches.

[mweststrate]

There is nothing indeed to forbid you to pass the props to ChildStore like in mobx 5, to use them during initialization of your store, so that the initial state is based on the props. Pass props on init + sync with useEffect is the idea.

For background, the reason we removed the original pattern is that it requires prop syncing to be part of render, making render side-effectful, which React (rightly) complained about. By using useEffect, it becomes much clearer when the syncing happens, and it plays according to the React rules (sorry, cant link to the original issue easily afaik, as we're merging the issue trackers)

[danielkcz]

I have revived the original issue and converted it to a discussion. It's a bit lengthy, but I suppose it's good to keep around.

#2539

[urugator]

Please for anyone writing docs or articles:
If you need to sync props and state, it's a sign that state should be lifted up - that should be a number one suggestion.
Secondly initializing state from props is also an antipattern and exactly the same solution applies.
https://reactjs.org/docs/lifting-state-up.html#lessons-learned
The power of hooks lies in the ability to easily move state and related logic from one component to another, so take advantage of it.

If you've considered the above and you still want to init/sync state from props, there is nothing special about mobx:
Init from props:

const [store] = useState(() => new Store(props.foo, props.bar))

Sync local state with props
may break if you pass the store to other component:

const [localStore] = useState(() => new Store());
localStore.foo = props.foo;
localStore.bar = props.bar;	

Sync any state with props

const [store] = useState(() => new Store()); // the store could also come from props/import whatever
// layoutEffect!!!
useLayoutEffect(() => {
  store.foo = props.foo;
  store.bar = props.bar;
})

Other recommendations:

• wrap the syncing logic in action
• keep state definition outside component - only call constructor/factory from component
• in case of using useLayoutEffect make sure your rendering logic can handle non-synced state

[codeBelt]

Thanks for the feedback.

Seems like calling the childStore.init method within useEffect is the preferred way and making sure your state is lifted-up.

Let me give a little more details on why I asked to question in the first place in hopes I can squeeze a little bit more knowledge/guidance out you.

Typically I have one local store per page to manage everything with a few global stores to facilitate data across pages like auth/user stuff. But there is this dashboard page with several widgets/ui-containers on it. To keep with the examples above I have this parentStore that handles 99% of the api calls and holds onto the data. I created smaller widget stores (aka ChildStore) to consume the parentStore data and transform it into useable data for my chart widget or my table widget. Since my child stores have access to the parentStore I can call methods on there so all the widgets can be synced properly. It would be too complicated/messy to have all the logic in the parentStore so that is why I created a child store for each widget.

If you have any other tips/tidbits/documentation you'd like to share I'll take it or give me a thumbs up if I am headed in the right direction.

[urugator]

and making sure your state is lifted-up.

Not "and" - the point of lifting state up is to remove the need for syncing.
There is no need to create widget store lazily on component mount and then keeping it in sync with props.
Whether or not some widget component will be rendered depends on state. So the state knows upfront which widget stores are needed.
So you can create the widget store instances inside constructors/actions upfront and pass them to components with ctx/props.
Eg you could have some DashboardPageStore which creates an array of widget stores in constructor and then just pass them to widget components.

Seems like calling the childStore.init method within useEffect is the preferred way

It's the worst possible way.

If you know that props.parentStore never changes, then you don't need to sync anything, therefore you don't need an effect, just use const [childStore] = useState(() => new ChildStore(props.parentStore)).
Just keep in mind that from the perspective of the component itself there is no guarantee a specific prop won't change.

If you want to account for a situation where props.parentStore changes, then either:
a) Completely recreate the childStore when props.parentStore changes:

const [childStore, setChildStore] = useState();
useLayoutEffect(() => {
  setChildStore(new ChildStore(props.parentStore))
}, [props.parentStore])

b) Update the childStore when props.parentStore changes:

const [childStore] = useState(new ChildStore())
useLayoutEffect(() => {    
  childStore.setParentStore(props.parentStore)
}, [props.parentStore])

The second one is trickier, because it may involve invalidating a lot of things in ChildStore. Generally it's not suitable for swapping dependencies.

[urugator]

I ended up moving makeAutoObservable closer to the return.

Don't do that. Make it observable before passing it to other constructors (ChartWidgetStore/TableWidgetStore).
Otherwise the widget constructors will see a bit different object than the one actually returned, it won't cause any issues in this case, but generally could be dangerous.
Note store.employees !== makeAutoObservable(store).employees
Also you won't be able to create reactions/autoruns inside widget constructor.

[codeBelt]

Currently I am doing version A below but when creating child stores do I need to use makeAutoObservable also, like in version B below?

// A version
const ChartWidgetStore = () => { /*...*/ };
// B version
const ChartWidgetStore = () => makeAutoObservable({ /*...*/ });

export const DashboardPageStore = () => {
  const store = makeAutoObservable({
    chartWidgetStore = null,
  });

  store.chartWidgetStore = ChartWidgetStore(store);

  return store;
};

[urugator]

I thought that observable uses different conversion rules than makeAutoObservable, but it doesn't seem to be the case.
Which means version A would work - the child store is converted to observable using observable, but since the rules are the same as makeAutoObservable the result is nearly the same.
However, knowing this, I suggest to use observable instead of makeAutoObservable. At that point A won't work because observable returns copy, so the store passed to ChartWidgetStore would be a different object. Leave the responsibility of making things observable to each inidividual store.

[codeBelt]

Ok, I used observable for all my stores. (App Example V4) and it works nice!

const ChartWidgetStore = (dashboardPageStore) => observable({ /*...*/ });
const TableWidgetStore = (dashboardPageStore) => observable({ /*...*/ });

export const DashboardPageStore = () => {
  const store = observable({
    chartWidgetStore = null,
    tableWidgetStore = null,
  });

  store.chartWidgetStore = ChartWidgetStore(store);
  store.tableWidgetStore = TableWidgetStore(store);

  return store;
};

The the last thing I need to figure out is the correct TypeScript types for the stores.

[urugator]

Can't help with that, not proficient with TS.

[ilovedesert001]

@codeBelt
How about this, in every render, store the props object in the mutable ref object .

function useLocalStore<TStore extends Record<string, any>, TSource extends object = any>(
  initializer: () => TStore,
  props?: TSource,
  annotations?: AnnotationsMap<TStore, never>
): TStore & {
  props: TSource;
} {
  const r = useRef(null as TSource);
  r.current = props;
  const state = useState(function () {
    const ret = initializer();
    Object.defineProperty(ret, "props", {
      enumerable: false,
      get() {
        return r.current;
      }
    });
    if (!annotations) {
      annotations = {};
    }
    (annotations as any)["props"] = false;
    return observable(ret, annotations, { autoBind: true });
  })[0];

  return state as any;
}

const ParentComponent = observer(function () {
  const state = useLocalObservable(() => {
    return {
      count: 1
    };
  });

  return (
    <div>
      ParentComponent count: {state.count}
      <button
        onClick={() => {
          state.count += 1;
        }}
      >
        +
      </button>
      <hr />
      <ChildComponent count={state.count} />
    </div>
  );
});

const ChildComponent = observer(function (props: { count: number }) {
  const state = useLocalStore(() => {
    return {
      count: 1,
      printParentCount() {
        console.log(state.props.count);
      }
    };
  }, props);

  return (
    <div>
      ChildComponent count: {state.count}
      <button
        onClick={() => {
          state.count += 1;
        }}
      >
        +
      </button>
      <div>prop count:{props.count}</div>
      <button
        onClick={() => {
          state.printParentCount();
        }}
      >
        print parent count
      </button>
    </div>
  );
});