• Introduction
• 1. Introduction to Mobservable
  • 1.1. Why Mobservable?
  • 1.2. The Gist of Mobservable
  • 1.3. Concepts & Principles
• 1. The Basics: Making stuff Reactive
  • 2.1. Reactive Data Structures
  • 2.2. Reactive Views
  • 2.3. Reactive Components
• 1. Core API
  • 3.1. makeReactive
  • 3.2. observe
  • 3.3. @observable
  • 3.4. @reactiveComponent
• 1. Advanced API
  • 4.1. isReactive
  • 4.2. extendReactive
  • 4.3. modifiers
  • 4.4. transactions
  • 4.5. observeAsync
  • 4.6. observeUntil
  • 4.7. expr
  • 4.8. strict
  • 4.9. toJSON
  • 4.10. debug utilities
• 1. Best Practices For Large Apps
  • 5.1. Definging data stores
  • 5.2. Writing (async) actions
  • 5.3. Organizing React components
  • 5.4. Universal applications —>
• 1. How does Mobservable work?
• 1. Tips & Tricks
  • 7.1. DevTools
  • 7.2. ES6 & TypeScript goodies
  • 7.3. Tracking state changes
  • 7.4. Predicates
  • 7.5. Performance considerations
• 8. Resources
• 9. Frequently Asked Questions
• Published with GitBook

Introduction

Edit This Page

@reactiveComponent

The reactiveComponent function / decorator can be used to turn ReactJS components into reactive components. It wraps the component's render function in mobservable.observe to make sure that any data that is used during the rendering of a component forces a rerendering upon change. It is available through the separate mobservable-react package.

import {reactiveComponent} from "mobservable-react";
var timerData = {
    secondsPassed: 0
};
setInterval(function() {
    timerData.secondsPassed++;
}, 1000);
@reactiveComponent class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
});
React.render(<Timer timerData={timerData} />, document.body);

In ES5 environments, reactive components can be simple declared using reactiveComponent(React.createClass({ ….

When using @reactiveComponent, a lot of components will become stateless. In such cases you can also write reactive function components using @reactiveComponent (this works also on ES5 and with React 0.13):

const Timer = @reactiveComponent( ({timerData}) =>
    (<span>Seconds passed: { timerData.secondsPassed } </span> )
);

Note: when reactiveComponent needs to be combined with other decorators or higher-order-components, make sure that reactiveComponent is the most inner (first applied) decorator; otherwise it might do nothing at all.