# Use observables instead of state in React components

Example of maintaining state with a simple observable in your own component:

```javascript
import React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer class MyComponent extends React.Component {
  onClick = () => {
    this.active = true;
    // ...
  };

  @observable active = false;

  render() {
    return (
      <a onClick={this.onClick} disabled={this.active}>click works only once</a>
    );
  }
}
```

Note that you are not passing an observable to the "a" component, you are passing a plain value (in this case a Boolean). When the observable changes, the render method above will be re-evaluated by React.

For components high in the component/DOM tree, re-evaluating their render method and all descendents' render methods can be expensive. It is therefore better to pass observable objects to child components, i.e. "dereference lately" as recommended on <https://mobx.js.org/best/react-performance.html>

> Note that in non-production mode, this performance optimization will not occur when components declare propTypes, but it will work correctly in React production mode. See <https://github.com/mobxjs/mobx-react/issues/56>

Passing objects with observable properties also makes it easy to control the state of a child component both from within itself and from its parent. A common use case is a popup/overlay component that its parent needs to open and the overlay itself needs to be able to close:

```javascript
@observer class ParentComponent extends React.Component {
  onOpenClick = () => {
    this.overlayState.active = true;
  };

  @observable overlayState = {
    active: false,
  };

  render() {
    return (
      <div>
        <a onClick={this.onOpenClick}>open</a>
        <Overlay observable={this.overlayState}>
      </div>
    );
  }
}

@observer class Overlay extends React.Component {
  onCloseClick = () => {
    this.props.observable.active = false;
  };

  render() {
    return (
      {this.props.observable.active ?
        <div>
          <a onClick={this.onCloseClick}>close</a>
        </div>
      : null}
    );
  }
}

Overlay.propTypes = {
  observable: React.PropTypes.shape({
    active: React.PropTypes.bool.isRequired,
  }).isRequired,
};
```

Note that ParentComponent's render method will not be re-evaluated when the active boolean is toggled, only Overlay's.

## @action decorator in a React Component will break react-hot-loader

If, in your React component, you want to have a method that will update more than one observable, to make this atomic (and reduce re-renders), wrap the updates in an [action](https://mobx.js.org/refguide/action.html)() but do *not* use the @action decorator as currently this will cause an error in react-hot-loader (even if you edit and need to hot-reload a different component from the one with the decorator), i.e.:

```javascript
@observer class ParentComponent extends React.Component {
  myMethod = () => {
    action(() => {
      this.observable1 = true;
      this.observable2 = true;
    })();
  };

  @observable observable1 = false;
  @observable observable2 = false;
...
}
```

For more on this issue see:

* <https://github.com/mobxjs/mobx/issues/655>
* <https://github.com/gaearon/react-proxy/issues/71>


---

# 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/use-observables-instead-of-state-in-react-components.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.