4

I know It may sound like a dumb question, But I am not able to get this solved in my head. Please bear with me.

In case when we use a state management system in React like Redux / Mob X, I guess the main purpose of these state management techniques is to provide a single source of Data and a more structured approach of updating it.

Say, I am Using a state management library(MobX) for React, And suppose I have a parent component which makes an http API call and updates the MobX store with the API response. Now I need that data in one of child/nested components. My Question is, Should I pass that data as a prop to child component or should I enable child component to connect with Central Store and directly get that data ?

by connecting the child to store, I am turning the Child into a class component, which is making it more heavy and React optimisations may not apply. I am defeating the whole purpose of a functional component.

Awaiting replies.

Best Regards, Lalit

Lalit Jethani
  • 51
  • 4
  • You don't have to worry about performance. The difference between the two approaches will be negligible. It's more a question of taste, but if you have a component purely dependent on the `props` given to it, it's much easier to make it reusable than if it's directly dependent on the global store. – Tholle Jun 29 '18 at 20:27
  • 1
    Thanks a lot for the response. Really appreciate it. One more concern, I have generally seen in case of mobx, parent component passes the store to child component, and at the same time, child component has a observable decorator. Why do we need a observer decorator on child in this case, if parent can pass the data via props? – Lalit Jethani Jun 29 '18 at 20:39
  • The `observer` decorator make sure that the component is re-rendered when the `observables` is referenced in the last render are changed. If you e.g. pass down `myStore`, and it references `myStore.value` in the render method, it will re-render automatically when `myStore.value` is changed. Without the `observer` decorator, it will not. – Tholle Jun 29 '18 at 20:41
  • But parent component is also a observable to the same store and if parent component is also observing the same observable variable, it will also re render in case of store state change, resulting in re rendering of child with updated state as props. Does observable decorator makes sense here as well? – Lalit Jethani Jun 29 '18 at 20:46
  • I would recommend reading [this great part of the documentation](https://mobx.js.org/best/react.html) for a thorough explanation. – Tholle Jun 29 '18 at 20:58

1 Answers1

1

This completely depends on the situation. I would suggest splitting your components up in 2 parts:

  1. Components that could be re-used in other projects
  2. (Higher level) Components that are so specific to this project that they probably never will be re-used.

For components of category 1, I would suggest not using mobx store directly, but instead make pure react components. (eg think of a dropdown, or an ajax dropdown component).

For second part components (think of, header, footer, section components specific for your website). just make them directly interact with the Mobx store, so that you can way quicker code what you need (instead of constantly having to prop everything).

addition

For components of category 1 you can always wrap them with the @inject() method. This way for example you could turn a dropdown component into a UserDropdown component that uses the mobx store for its state. (The inject method injects mobx state as props in the component).

const UserDropDownComponent = mobx.inject(stores => ({users: stores.userStore.users}))(DropDownComponent);
// usage:
<UserDropDownComponent />

Warning

For pure components wont always see changes of mobx state. To Fix this you need to wrap the component in an @observe annotation. Or you have to inject the props by wrapping it into: mobx.toJS(yourMobxStateProperty)

Joel Harkes
  • 10,975
  • 3
  • 46
  • 65