refactor(core): don't check react internals

src/constants.ts

@@ -10,11 +10,6 @@ export const POINTER_EVENTS = [
   'onPointerOut',
 ] as const
 
-/**
- * React's internal props.
- */
-export const RESERVED_PROPS = ['children', 'key', 'ref', '__self', '__source'] as const
-
 /**
  * React rendering modes (defaults to blocking).
  */

src/reconciler.ts

@@ -2,7 +2,6 @@ import Reconciler from 'react-reconciler'
 import * as OGL from 'ogl'
 import * as React from 'react'
 import { toPascalCase, applyProps, attach, detach, classExtends } from './utils'
-import { RESERVED_PROPS } from './constants'
 import { Catalogue, Instance, InstanceProps, RootState } from './types'
 
 // Custom objects that extend the OGL namespace
@@ -79,7 +78,7 @@ export const createInstance = (type: string, { object, args, ...props }: Instanc
   }
 
   // Create instance
-  const instance = object || (Array.isArray(args) ? new target(...args) : new target(args))
+  const instance: Instance = object || (Array.isArray(args) ? new target(...args) : new target(args))
 
   // If primitive, make a note of it
   if (type === 'primitive') instance.isPrimitive = true
@@ -202,13 +201,13 @@ export const checkShallow = (a: any, b: any) => {
 /**
  * Prepares a set of changes to be applied to the instance.
  */
-export const diffProps = (instance: Instance, newProps: InstanceProps, oldProps: InstanceProps = {}) => {
+export const diffProps = (instance: Instance, newProps: InstanceProps, oldProps: InstanceProps) => {
   const changedProps: InstanceProps = {}
 
   // Sort through props
   for (const key in newProps) {
     // Skip reserved keys
-    if (RESERVED_PROPS.includes(key as typeof RESERVED_PROPS[number])) continue
+    if (key === 'children') continue
     // Skip primitives
     if (instance.isPrimitive && key === 'object') continue
     // Skip if props match

src/utils.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as OGL from 'ogl'
-import { COLORS, POINTER_EVENTS, RESERVED_PROPS } from './constants'
+import { COLORS, POINTER_EVENTS } from './constants'
 import { useIsomorphicLayoutEffect } from './hooks'
 import { DPR, EventHandlers, Instance, InstanceProps, ObjectMap, RootState, SetBlock } from './types'
 
@@ -95,15 +95,18 @@ export const detach = (parent: Instance, child: Instance) => {
 export const applyProps = (instance: Instance, newProps: InstanceProps, oldProps?: InstanceProps) => {
   // Mutate our OGL element
   for (let key in newProps) {
-    const isReserved = RESERVED_PROPS.includes(key as typeof RESERVED_PROPS[number])
-    const isHandler = POINTER_EVENTS.includes(key as typeof POINTER_EVENTS[number])
-    const isIdentical = newProps[key] === oldProps?.[key]
+    // Don't mutate reserved keys
+    if (key === 'children') continue
 
-    // Collect event handlers
-    if (isHandler) instance.__handlers = { ...instance.__handlers, [key]: newProps[key] }
+    // Don't mutate unchanged keys
+    if (newProps[key] === oldProps?.[key]) continue
 
-    // Skip key if reserved to react, a react-ogl event, or unchanged (no-op)
-    if (isReserved || isHandler || isIdentical) continue
+    // Collect event handlers
+    const isHandler = POINTER_EVENTS.includes(key as typeof POINTER_EVENTS[number])
+    if (isHandler) {
+      instance.__handlers = { ...instance.__handlers, [key]: newProps[key] }
+      continue
+    }
 
     const value = newProps[key]
     let root = instance