Do child components need @observer when parent is already an Observer and Mobx state is not passed from Parent rather it is directly imported into child components?

[AishwaryaChat]

Suppose I have an React App component which is the root component, and it is rendering many other Providers and child components. Only the App root component is decorated with observer, App component is not using the Mox state anywhere directly but the providers in it and children components are using it, by directly importing the Mobx state inside it, and these Providres and child components are not decorated with observer.

Question:

1. Just declaring the root component as observer, is that sufficient for all children to get updated values if they are directly importing the Mobx state inside them and using it?
2. Are there any kind of performance issues like unnecessary re-rendering of components that happen because of this? since there are many child components inside root component which are not at all using Mobx state
3. Will the Mobx state behave unstable and won't get updates if only then root component is declared as observer?

Here is the reference code for this

RootStore.js

class RootStore {
  constructor() {
	makeObservable(this, {
	store1: observable
	})
  }

  setStore1(val) {
    this.store1 = val;
  }
}
export default new RootStore();

Provider1.js

import rootStore from 'RootStore';
const Provider1Context = createContext();
const Provider1 = ({children}) => {
	const val = rootStore.store1;
	return  <Provider1Context.Provider value={val}>{children}</Provider1Context.Provider>
}
export default Provider1

RouteComponent.jsx

import rootStore from 'RootStore';

const RouteComponent = () => {
const val = rootStore.store1;
  return (
    <div>I am Route component {val}</div>
  );
}
export default RouteComponent

App.jsx

const App = observer(() => (
  <ErrorBoundary>
    <Provider1>
		<Router>
			<Route to="/" component={RouteComponent}>
		<Router/>
    </Provider1>
  </ErrorBoundary>
));

[urugator]

1. No
2. It won't work
3. Yes

https://mobx.js.org/react-integration.html#always-read-observables-inside-observer-components

[AishwaryaChat]

@urugator
We have this application running in production, with the same configuration as I described above, Its horrible to know that we should not do something like this, because our whole business is dependent on this app.

Also as of now, I don't see any places where the observer state is not updating correctly.

Can you give example of what kind of performance issues that can arise because of this.

[urugator]

Also as of now, I don't see any places where the observer state is not updating correctly.

If that's the case, you can remove observer/makeObservable calls and uninstall mobx as it's not doing anything.

Can you give example of what kind of performance issues that can arise because of this.

It's not about performance, it just doesn't work.