Discard useRefCallback

Author: Rokt33r

.eslintrc

@@ -9,7 +9,9 @@
   ],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": ["warn", {
+      "additionalHooks": "(useRefEffect)" // Use `|` to add more hooks. "(useX|useY|useZ)"
+    }],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-use-before-define": "off",
@@ -20,6 +22,7 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/prop-types": "off",
     "react/display-name": "off"
+
   },
   "settings": {
     "react": {

src/cloud/lib/hooks/index.ts

@@ -1,32 +1,24 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
 export function useRefState<S>(initialValue: S) {
   const [state, setState] = useState<S>(initialValue)
-  const stateRef = useRef(state)
-  useEffect(() => {
-    stateRef.current = state
-  }, [state])
+  const stateRef = useRefEffect(state)
+
   return [state, stateRef, setState] as [
     S,
     React.MutableRefObject<S>,
     React.Dispatch<React.SetStateAction<S>>
   ]
 }
 
-export function useRefCallback<T extends (...args: any[]) => any>(
-  callback: T,
-  deps: React.DependencyList
-) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  const cb = useCallback(callback, deps)
-
-  const callbackRef = useRef(cb)
+export function useRefEffect<S>(value: S) {
+  const valueRef = useRef(value)
 
   useEffect(() => {
-    callbackRef.current = cb
-  }, [cb])
+    valueRef.current = value
+  }, [value])
 
-  return [cb, callbackRef] as [T, React.MutableRefObject<T>]
+  return valueRef
 }
 
 export function useCommittedRef<T>(value: T): React.MutableRefObject<T> {

src/cloud/lib/stores/pageStore/store.tsx

@@ -8,7 +8,7 @@ import React, {
   useMemo,
 } from 'react'
 import { PageDataContext, PageDataProps } from './types'
-import { useCommittedRef, useRefCallback } from '../../hooks'
+import { useCommittedRef, useRefEffect } from '../../hooks'
 import { SerializedUserTeamPermissions } from '../../../interfaces/db/userTeamPermissions'
 import { SerializedTeam } from '../../../interfaces/db/team'
 import { SerializedUser } from '../../../interfaces/db/user'
@@ -32,7 +32,7 @@ function usePageDataStore(pageProps: any) {
     setPageData(pageProps)
   }, [pageProps])
 
-  const [setPartialPageData, setPartialPageDataRef] = useRefCallback(
+  const setPartialPageData = useCallback(
     (val: any) => {
       setPageData((prevState: any) => {
         return Object.assign(
@@ -44,6 +44,7 @@ function usePageDataStore(pageProps: any) {
     },
     [setPageData]
   )
+  const setPartialPageDataRef = useRefEffect(setPartialPageData)
 
   const team: undefined | SerializedTeam = pageData.team
   const permissions: undefined | SerializedUserTeamPermissions[] =