Resolve conflicts, convert PR mobxjs#829, and make pretty

src/observerClass.ts

@@ -1,5 +1,12 @@
 import { PureComponent, Component } from "react"
-import { createAtom, _allowStateChanges, Reaction, $mobx, _allowStateReadsStart, _allowStateReadsEnd } from "mobx"
+import {
+    createAtom,
+    _allowStateChanges,
+    Reaction,
+    $mobx,
+    _allowStateReadsStart,
+    _allowStateReadsEnd
+} from "mobx"
 import { isUsingStaticRendering } from "mobx-react-lite"
 
 import { newSymbol, shallowEqual, setHiddenProp, patch } from "./utils/utils"
@@ -153,15 +160,15 @@ function makeObservableProp(target: any, propName: string): void {
         configurable: true,
         enumerable: true,
         get: function() {
-            let prevReadState = false;
+            let prevReadState = false
 
             if (_allowStateReadsStart && _allowStateReadsEnd) {
-                prevReadState = _allowStateReadsStart(true);
+                prevReadState = _allowStateReadsStart(true)
             }
             getAtom.call(this).reportObserved()
 
             if (_allowStateReadsStart && _allowStateReadsEnd) {
-                _allowStateReadsEnd(prevReadState);
+                _allowStateReadsEnd(prevReadState)
             }
 
             return this[valueHolderKey]

test/issue806.test.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { configure, observable } from "mobx"
+import { observer } from "../src"
+import { render } from "@testing-library/react"
+import { withConsole } from "./utils/withConsole"
+
+@observer
+class Issue806Component extends React.Component<any> {
+    render() {
+        return (
+            <span>
+                {this.props.a}
+                <Issue806Component2 propA={this.props.a} propB={this.props.b} />
+            </span>
+        )
+    }
+}
+
+@observer
+class Issue806Component2 extends React.Component<any> {
+    render() {
+        return (
+            <span>
+                {this.props.propA} - {this.props.propB}
+            </span>
+        )
+    }
+}
+
+test("verify issue 806", () => {
+    configure({
+        observableRequiresReaction: true
+    })
+
+    const x = observable({
+        a: 1
+    })
+
+    withConsole(["warn"], () => {
+        render(<Issue806Component a={"a prop value"} b={"b prop value"} x={x} />)
+        expect(console.warn).not.toHaveBeenCalled()
+    })
+
+    // make sure observableRequiresReaction is still working outside component
+    withConsole(["warn"], () => {
+        x.a.toString()
+        expect(console.warn).toBeCalledTimes(1)
+        expect(console.warn).toHaveBeenCalledWith(
+            "[mobx] Observable ObservableObject@1.a being read outside a reactive context"
+        )
+    })
+})