fix(store): throw error if store used inside render

Author: rolandszoke

__tests__/functionComponent.test.no-hook.jsx

@@ -16,15 +16,15 @@ describe('Using an old react version', () => {
     );
   });
 
-  test('Using global state in a function component with a version of react that has no hooks should not throw an error', () => {
+  test('Using global state in a function component should not throw an error', () => {
     const person = store({ name: 'Bob' });
     const MyComp = view(() => {
       return <div>{person.name}</div>;
     });
     expect(() => render(<MyComp />)).not.toThrow();
   });
 
-  test('Using global state in a class component with a version of react that has no hooks should not throw an error', () => {
+  test('Using global state in a class component should not throw an error', () => {
     const person = store({ name: 'Bob' });
     const MyComp = view(
       class extends Component {
@@ -36,7 +36,7 @@ describe('Using an old react version', () => {
     expect(() => render(<MyComp />)).not.toThrow();
   });
 
-  test('Using local state in a class component with a version of react that has no hooks should not throw an error', () => {
+  test('Using local state in a class component should not throw an error', () => {
     const MyComp = view(
       class extends Component {
         person = store({ name: 'Bob' });
@@ -49,4 +49,19 @@ describe('Using an old react version', () => {
 
     expect(() => render(<MyComp />)).not.toThrow();
   });
+
+  test('Using local state inside a render of a class component should throw an error', () => {
+    const MyComp = view(
+      class extends Component {
+        render() {
+          const person = store({ name: 'Bob' });
+          return <div>{person.name}</div>;
+        }
+      },
+    );
+
+    expect(() => render(<MyComp />)).toThrow(
+      'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
+    );
+  });
 });

src/store.js

@@ -3,9 +3,9 @@ import { observable } from '@nx-js/observer-util';
 
 import {
   isInsideFunctionComponent,
-  isInsideClassComponent,
+  isInsideClassComponentRender,
+  isInsideFunctionComponentWithoutHooks,
 } from './view';
-import { hasHooks } from './utils';
 
 export function store(obj) {
   // do not create new versions of the store on every render
@@ -14,10 +14,15 @@ export function store(obj) {
   if (isInsideFunctionComponent) {
     return useMemo(() => observable(obj), []);
   }
-  if (!hasHooks && isInsideClassComponent) {
+  if (isInsideFunctionComponentWithoutHooks) {
     throw new Error(
       'You cannot use state inside a function component with a pre-hooks version of React. Please update your React version to at least v16.8.0 to use this feature.',
     );
   }
+  if (isInsideClassComponentRender) {
+    throw new Error(
+      'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
+    );
+  }
   return observable(obj);
 }

src/view.js

@@ -17,7 +17,8 @@ import { hasHooks } from './utils';
 import { queue } from './queue';
 
 export let isInsideFunctionComponent = false;
-export let isInsideClassComponent = false;
+export let isInsideClassComponentRender = false;
+export let isInsideFunctionComponentWithoutHooks = false;
 const COMPONENT = Symbol('owner component');
 const TRIGGERRENDER = Symbol('trigger render');
 
@@ -96,13 +97,15 @@ export function view(Comp) {
       };
 
       render() {
-        isInsideClassComponent = true;
+        isInsideClassComponentRender = !isStatelessComp;
+        isInsideFunctionComponentWithoutHooks = isStatelessComp;
         try {
           return isStatelessComp
             ? Comp(this.props, this.context)
             : super.render();
         } finally {
-          isInsideClassComponent = false;
+          isInsideClassComponentRender = false;
+          isInsideFunctionComponentWithoutHooks = false;
         }
       }