React App with MobX

Class component with @observer decorator

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

@withStore
@observer
class ClassComponentWithDecorator extends Component {
  render() {
    <div>{this.props.store?.xxx}</div>
    ...
  };
}

Class component with observer() wrapper

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

const ClassComponentWithObserver = observer(
  class ClassComponent extends Component { 
    render () {
      <div>{this.props.store?.xxx}</div>
      ...
    };
  }
);

export default withStore(ClassComponentWithObserver);

Function component with useObserver() hook

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

const FunctionComponentUseObserver = (props) => {
  const store = useStore();
  return useObserver(() => (
    <div>{store?.xxx}</div>
    ...
  )); 
};

Function component with observer() wrapper

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

const FunctionComponent = observer((props) => {
  const store = useStore();
  return (
    <div>{store?.xxx}</div>
    ...
  ); 
});

Usage of MobX's <Observer /> component

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

class UsingObserverComponent extends Component {
  render() {
    return (
      <Observer>
        {() => (
          <div>{this.props.store?.xxx}</div>
        )}
      </Observer>
      ...
    )
  };    
}

export default withStore(UsingObserverComponent);

Usage of MobX's <Observer /> as Render Props

Elapsed time: 0 sec

Observable value: 0

Internal state value: 0

class UsingObserverComponent extends Component {
  render() {
    return (
      <Observer render={() => ( 
        <div>{this.props.store?.xxx}</div>
      )} />
      ...
    )
  };    
}

export default withStore(UsingObserverComponent)

Create React App with MobX Demo

No eject required to get decorators work

MobX is compatible with Hooks, setState() and React Context

Class component with @observer decorator

Class component with observer() wrapper

Function component with useObserver() hook

Function component with observer() wrapper

Usage of MobX's <Observer /> component

Usage of MobX's <Observer /> as Render Props