From 041e26cdec2474e32abb7de39c2e975543201f35 Mon Sep 17 00:00:00 2001
From: Veniamin Krol <vkrol@users.noreply.github.com>
Date: Sat, 3 Aug 2019 15:25:19 +0300
Subject: [PATCH] Rewrite the Provider component to function component

---
 src/Provider.js | 47 +++++++++++++++++++----------------------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/Provider.js b/src/Provider.js
index 7bf0902b..71323a0d 100644
--- a/src/Provider.js
+++ b/src/Provider.js
@@ -1,40 +1,31 @@
-import { Children, Component, createContext, createElement } from "react"
+import React from "react"
 import { shallowEqual } from "./utils/utils"
 
-export const MobXProviderContext = createContext({})
+export const MobXProviderContext = React.createContext({})
 
-export class Provider extends Component {
-    static contextType = MobXProviderContext
-    static displayName = "MobXProvider"
+export function Provider(props) {
+    const parentValue = React.useContext(MobXProviderContext)
+    const value = React.useRef({
+        ...parentValue,
+        ...grabStores(props)
+    }).current
 
-    constructor(props, context) {
-        super(props, context)
-        this.state = {
-            ...context,
-            ...grabStores(props)
+    if (process.env.NODE_ENV !== "production") {
+        const newValue = { ...value, ...grabStores(props) } // spread in previous state for the context based stores
+        if (!shallowEqual(value, newValue)) {
+            throw new Error(
+                "MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"
+            )
         }
     }
 
-    render() {
-        return createElement(
-            MobXProviderContext.Provider,
-            { value: this.state },
-            this.props.children
-        )
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        if (process.env.NODE_ENV !== "production") {
-            const newStores = { ...prevState, ...grabStores(nextProps) } // spread in prevState for the context based stores
-            if (!shallowEqual(prevState, newStores))
-                throw new Error(
-                    "MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"
-                )
-        }
-        return prevState // because they didn't change, remember!
-    }
+    return (
+        <MobXProviderContext.Provider value={value}>{props.children}</MobXProviderContext.Provider>
+    )
 }
 
+Provider.displayName = "MobXProvider"
+
 function grabStores(from) {
     const res = {}
     if (!from) return res