# Observable vs @observable

Mobx supports declaring an observable either as `myObservableVariable = observable({......})` or by using a decorator, i.e.:

```javascript
@observable
myObservableClassProperty = {......};
```

There is a very important difference between these two. Using a decorator not only makes the properties of the object in `myObservableClassProperty`observable, it also makes the `myObservableClassProperty`property of your class instances observable so that placing a *new* object in it will cause observers to react, at which point they'll reference properties of this new object and so will subsequently react to changes in the new object.

On the other hand, placing a new object in `myObservableVariable`will have no effect on observers as they will continue to observe the old object.

Because MobX cannot react to newly added properties in an observable object, the ability to replace the whole object with one that has new properties provides for an effective workaround in many situations.

Although the decorators approach works well for class properties, it is not yet supported for plain object properties. Sometimes in singleton classes it is convenient to have 'private' observables. To enable replacement of the entire object in such an observable, use the following pattern:

```javascript
import { extendObservable } from 'mobx';

const obs = {};

extendObservable(obs, { myObservable: {......} });

// now you can observe obs.myObservable and obs.myObservable = {......} will cause its observers
// to react and observe changes to the new object thereafter
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://alexhisen.gitbook.io/mobx-recipes/observable-vs-observable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.