[form-builder] Memoize hot methods (#395)

packages/@sanity/form-builder/src/FormBuilderContext.js

@@ -19,11 +19,40 @@ function resolve(type, providedResolve = NOOP) {
   return undefined
 }
 
+// Memoize return values from a method that takes a single arg
+// memoized as a map of argument => return value
+function memoizeMap(method) {
+  const map = new WeakMap()
+  return function memoizedMap(arg) {
+    if (map.has(arg)) {
+      return map.get(arg)
+    }
+    const val = method.call(this, arg)
+    map.set(arg, val)
+    return val
+  }
+}
+
+// Memoize return value from method that takes no args
+function memoize(method) {
+  let called = false
+  let val
+  return function memoized() {
+    if (called) {
+      return val
+    }
+    val = method.call(this)
+    called = true
+    return val
+  }
+}
+
 export default class FormBuilderContext extends React.Component {
   static createPatchChannel = () => {
     const channel = pubsub()
     return {onPatch: channel.subscribe, receivePatches: channel.publish}
   }
+
   static propTypes = {
     schema: PropTypes.instanceOf(Schema).isRequired,
     value: PropTypes.any,
@@ -49,41 +78,33 @@ export default class FormBuilderContext extends React.Component {
     return this.props.value
   }
 
-  resolveInputComponent = type => {
+  resolveInputComponent = memoizeMap(type => {
     const {resolveInputComponent} = this.props
     return resolve(type, resolveInputComponent) || fallbackInputs[type.jsonType]
-  }
+  })
 
-  resolvePreviewComponent = type => {
+  resolvePreviewComponent = memoizeMap(type => {
     const {resolvePreviewComponent} = this.props
-
     return resolve(type, resolvePreviewComponent)
-  }
+  })
 
-  _getMemoizedChildContext() {
-    if (!this._childContext) {
-      const {schema, patchChannel} = this.props
-      this._childContext = {
-        getValuePath: () => ([]),
-        formBuilder: {
-          onPatch: patchChannel ? patchChannel.onPatch : () => {
-            // eslint-disable-next-line no-console
-            console.warn('No patch channel provided to form-builder. If you need input based patch updates, please provide one')
-            return NOOP
-          },
-          schema,
-          resolveInputComponent: this.resolveInputComponent,
-          resolvePreviewComponent: this.resolvePreviewComponent,
-          getDocument: this.getDocument
-        }
+  getChildContext = memoize(() => {
+    const {schema, patchChannel} = this.props
+    return {
+      getValuePath: () => ([]),
+      formBuilder: {
+        onPatch: patchChannel ? patchChannel.onPatch : () => {
+          // eslint-disable-next-line no-console
+          console.warn('No patch channel provided to form-builder. If you need input based patch updates, please provide one')
+          return NOOP
+        },
+        schema,
+        resolveInputComponent: this.resolveInputComponent,
+        resolvePreviewComponent: this.resolvePreviewComponent,
+        getDocument: this.getDocument
       }
     }
-    return this._childContext
-  }
-
-  getChildContext() {
-    return this._getMemoizedChildContext()
-  }
+  })
 
   render() {
     return this.props.children