8.5.1 React hooks useContext and createContext don´t work properly

Prerequisites:

This example uses MobX for state management.

create some store AuthStore.ts (the decorators are not mandatory, you can try it without them, the result is same)

import { action, observable, decorate } from 'mobx';
import { createContext } from 'react';

export class AuthStore {
    @observable apiVersion: string = 'ho';

    @action fetchApiVersion() {
        this.apiVersion = 'ha';
    }
}

export const authStore = new AuthStore();
export const authStoreContext = createContext<AuthStore>(authStore);   

create App.tsx

import React, { useContext, useEffect } from 'react';
import { observable } from "mobx";
import { observer } from 'mobx-react';

import './app.scss';
import { authStoreContext } from './AuthStore';

export const App = observer(() => {
  const authStore = useContext(authStoreContext);

  useEffect(() => {
    authStore.fetchApiVersion();
  }, []);

  const setApiVersion = () => {
    authStore.fetchApiVersion();
  };

  /*
   * Replace the elements below with your own.
   *
   * Note: The corresponding styles are in the ./${fileName}.${style} file.
   */
  return (
    <div className="app">
      <button onClick={() => setApiVersion()}>{authStore.apiVersion}</button>
    </div>
  );
});

export default App;

The rendered property is not udpating.

Solution? This is working properly. And the store property is updating properly.

import React, { useContext, useEffect } from 'react';
import { observable } from "mobx";
import { observer } from 'mobx-react';

import './app.scss';

const state = observable({
  apiVersion: 'ho',
  fetchApiVersion: () => {
    state.apiVersion = 'ha';
  }
});

export const App = observer(() => {

  useEffect(() => {
    state.fetchApiVersion();
  }, []);

  const setApiVersion = () => {
    state.fetchApiVersion();
  };

  /*
   * Replace the elements below with your own.
   *
   * Note: The corresponding styles are in the ./${fileName}.${style} file.
   */
  return (
    <div className="app">
      <button onClick={() => setApiVersion()}>{state.apiVersion}</button>
    </div>
  );
});

export default App;

Expected Behavior

React hooks useContext and createContext should work properly.

Current Behavior

React hooks useContext and createContext do not work.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. download the zip and extract it
2. yarn install
3. npm run-script start
4. replace useContext and createContext hooks with only exported const (mentioned above)
5. it works

Additionally you can try the same with 8.2.0 and everything works.

Context

Please provide any relevant information about your setup:

"dependencies": { "babel-plugin-transform-decorators": "^6.24.1", "document-register-element": "1.13.1", "mobx": "^5.13.1", "mobx-react": "^6.1.3", "react": "16.9.0", "react-dom": "16.9.0", "tslib": "^1.10.0" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-decorators": "^7.6.0", "@babel/preset-react": "7.0.0", "@nrwl/cypress": "8.5.1", "@nrwl/eslint-plugin-nx": "8.5.1", "@nrwl/jest": "8.5.1", "@nrwl/react": "8.5.1", "@nrwl/web": "8.5.1", "@nrwl/workspace": "8.5.1", "@testing-library/react": "8.0.5", "@types/jest": "24.0.9", "@types/node": "~8.9.4", "@types/react": "16.9.1", "@types/react-dom": "16.8.5", "@typescript-eslint/eslint-plugin": "2.0.0-alpha.4", "@typescript-eslint/parser": "2.0.0-alpha.4", "babel-plugin-transform-decorators-legacy": "^1.3.5", "cypress": "3.4.1", "dotenv": "6.2.0", "eslint": "6.1.0", "eslint-config-prettier": "6.0.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.14.3", "eslint-plugin-react-hooks": "1.6.1", "jest": "24.1.0", "prettier": "1.18.2", "ts-jest": "24.0.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.4.5" }

Example project: testapp.zip

[jaysoo]

It looks like decorator support through babel needs to use legacy: true. It’ll be fix in the upcoming release. Sorry for any inconvenience!

[jaysoo]

@atifsyedali Yes, that was the case