feat: add useImmediateUpdateEffect (#14)

Author: jquense

src/useImmediateUpdateEffect.ts

@@ -0,0 +1,31 @@
+import { DependencyList, useRef } from 'react'
+import useStableMemo from './useStableMemo'
+
+/**
+ * An _immediate_ effect that runs an effect callback when its dependency array
+ * changes. This is helpful for updates should must run during render, most
+ * commonly state derived from props; a more ergonomic version of https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+ *
+ * ```ts
+ * function Example({ value }) {
+ *   const [intermediaryValue, setValue] = useState(value);
+ *
+ *   useImmediateUpdateEffect(() => {
+ *     setValue(value)
+ *   }, [value])
+ * ```
+ */
+function useImmediateUpdateEffect(effect: () => void, deps: DependencyList) {
+  const firstRef = useRef(true)
+
+  useStableMemo(() => {
+    if (firstRef.current) {
+      firstRef.current = false
+      return
+    }
+
+    effect()
+  }, deps)
+}
+
+export default useImmediateUpdateEffect

test/helpers.tsx

@@ -0,0 +1,18 @@
+import { ReactWrapper, mount } from 'enzyme'
+import React from 'react'
+
+export function renderHook<T extends (props: P) => any, P = any>(
+  fn: T,
+  initialProps?: P,
+): [ReturnType<T>, ReactWrapper<P>] {
+  const result = Array(2) as any
+
+  function Wrapper(props: any) {
+    result[0] = fn(props)
+    return <span />
+  }
+
+  result[1] = mount(<Wrapper {...initialProps} />)
+
+  return result
+}

test/useForceUpdate.test.tsx

@@ -1,21 +1,15 @@
-import React, { useEffect } from 'react'
 import { act } from 'react-dom/test-utils'
-
-import { mount } from 'enzyme'
-
 import useForceUpdate from '../src/useForceUpdate'
+import { renderHook } from './helpers'
 
 describe('useForceUpdate', () => {
   it('should return a function that returns mount state', () => {
-    let forceUpdate: ReturnType<typeof useForceUpdate>
     let count = 0
-    function Wrapper() {
-      forceUpdate = useForceUpdate()
-      count++
-      return <span />
-    }
 
-    mount(<Wrapper />)
+    const [forceUpdate] = renderHook(() => {
+      count++
+      return useForceUpdate()
+    })
 
     expect(count).toEqual(1)
     act(() => {

test/useImmediateUpdateEffect.test.tsx

@@ -0,0 +1,25 @@
+import useImmediateUpdateEffect from '../src/useImmediateUpdateEffect'
+import { renderHook } from './helpers'
+
+describe('useImmediateUpdateEffect', () => {
+  it('should return a function that returns mount state', () => {
+    const spy = jest.fn()
+
+    const [, wrapper] = renderHook(
+      ({ value }) => {
+        useImmediateUpdateEffect(spy, [value])
+      },
+      { value: 1, other: false },
+    )
+
+    expect(spy).not.toHaveBeenCalled()
+
+    wrapper.setProps({ value: 2 })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    wrapper.setProps({ value: 2, other: true })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+})