Replace /useState with useInstance hook

Author: atomiks

src/Tippy.js

@@ -13,6 +13,7 @@ import {
   ssrSafeCreateDiv,
   preserveRef,
   updateClassName,
+  useInstance,
 } from './utils'
 
 // React currently throws a warning when using useLayoutEffect on the server. To
@@ -43,27 +44,26 @@ function Tippy({
   const isControlledMode = visible !== undefined
 
   const [mounted, setMounted] = useState(false)
-  // useImperativeInstance
-  const $this = useState({
+  const component = useInstance(() => ({
     container: ssrSafeCreateDiv(),
     renders: 1,
-  })[0]
+  }))
 
   const options = {
     ignoreAttributes,
     multiple,
     ...restOfNativeProps,
-    content: $this.container,
+    content: component.container,
   }
 
   if (isControlledMode) {
     options.trigger = 'manual'
   }
 
   useIsomorphicLayoutEffect(() => {
-    const instance = tippy($this.ref, options)
+    const instance = tippy(component.ref, options)
 
-    $this.instance = instance
+    component.instance = instance
 
     if (onCreate) {
       onCreate(instance)
@@ -86,12 +86,12 @@ function Tippy({
 
   useIsomorphicLayoutEffect(() => {
     // Prevent this effect from running on 1st render
-    if ($this.renders === 1) {
-      $this.renders++
+    if (component.renders === 1) {
+      component.renders++
       return
     }
 
-    const { instance } = $this
+    const { instance } = component
 
     instance.set(options)
 
@@ -112,7 +112,7 @@ function Tippy({
 
   useIsomorphicLayoutEffect(() => {
     if (className) {
-      const { tooltip } = $this.instance.popperChildren
+      const { tooltip } = component.instance.popperChildren
       updateClassName(tooltip, 'add', className)
       return () => {
         updateClassName(tooltip, 'remove', className)
@@ -124,11 +124,11 @@ function Tippy({
     <>
       {cloneElement(children, {
         ref(node) {
-          $this.ref = node
+          component.ref = node
           preserveRef(children.ref, node)
         },
       })}
-      {mounted && createPortal(content, $this.container)}
+      {mounted && createPortal(content, component.container)}
     </>
   )
 }

src/TippyGroup.js

@@ -1,13 +1,13 @@
-import { Children, cloneElement, useState, useEffect } from 'react'
+import { Children, cloneElement, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import tippy from 'tippy.js'
+import { useInstance } from './utils'
 
 export default function TippyGroup({ children, ...props }) {
-  // useImperativeInstance
-  const $this = useState({ instances: [] })[0]
+  const component = useInstance({ instances: [] })
 
   useEffect(() => {
-    tippy.group($this.instances, props)
+    tippy.group(component.instances, props)
   })
 
   return Children.map(children, child => {
@@ -17,7 +17,7 @@ export default function TippyGroup({ children, ...props }) {
           child.props.onCreate(instance)
         }
 
-        $this.instances.push(instance)
+        component.instances.push(instance)
       },
     })
   })

src/utils.js

@@ -1,3 +1,5 @@
+import { useRef } from 'react'
+
 export const isBrowser =
   typeof window !== 'undefined' && typeof document !== 'undefined'
 
@@ -23,3 +25,16 @@ export function updateClassName(tooltip, action, classNames) {
     }
   })
 }
+
+export function useInstance(initialValue = {}) {
+  // Using refs instead of state as it's recommended to not store imperative
+  // values in state due to memory problems in React(?)
+  const ref = useRef()
+
+  if (!ref.current) {
+    ref.current =
+      typeof initialValue === 'function' ? initialValue() : initialValue
+  }
+
+  return ref.current
+}