Remove arrow functions in favor of function expressions

Author: dolfbarr

src/index.stories.tsx

@@ -4,10 +4,10 @@ import '@storybook/addon-console'
 import '@storybook/addon-actions/register'
 import { useLog } from '.'
 
-export const App = (): React.ReactElement => {
+export function App(): React.ReactElement {
   const [isExampleMounted, setIsExampleMounted] = useState<boolean>(true)
 
-  setTimeout(() => {
+  setTimeout(function setIsMounted() {
     setIsExampleMounted(false)
   }, 3000)
 
@@ -20,24 +20,24 @@ export const App = (): React.ReactElement => {
   )
 }
 
-export const ExampleComponent = (): React.ReactElement => {
+export function ExampleComponent(): React.ReactElement {
   const { log } = useLog()
   const [state, setState] = useState<string | null>(null)
 
   log(state)
 
-  useEffect(() => {
+  useEffect(function setStateMount() {
     setState('onMount')
 
-    setTimeout(() => {
+    setTimeout(function setStateChange1() {
       setState('onChange 1s')
     }, 1000)
 
-    setTimeout(() => {
+    setTimeout(function setStateChange2() {
       setState('onChange 2s')
     }, 2000)
 
-    return () => {
+    return function setStateUnmount() {
       setState('onUnmount')
     }
   }, [])

src/index.tsx

@@ -42,7 +42,7 @@ export function useLog(): UseLogReturn {
       }
     })() ?? ''
 
-  const getGroupLabel = (type: PrintTypes): string => {
+  function getGroupLabel(type: PrintTypes): string {
     return `${String(type)} ${
       componentName ? 'in %c<' + String(componentName) + ' /> ' : '%c'
     }%c@ ${new Date().toLocaleTimeString()}`
@@ -75,15 +75,15 @@ export function useLog(): UseLogReturn {
     const prevValueRef = useRef<T>()
 
     if (ALLOWED_NODE_ENVS.includes(process.env.NODE_ENV ?? '')) {
-      return (() => {
+      return (function logHooks() {
         const isUnmounting = useRef(false)
-        useEffect(() => {
-          return () => {
+        useEffect(function setIsUnmounting() {
+          return function setIsUnmountingOnMount() {
             isUnmounting.current = true
           }
         }, [])
 
-        useEffect(() => {
+        useEffect(function onMount() {
           print({
             label: 'On mount',
             value: clonedValue,
@@ -92,7 +92,7 @@ export function useLog(): UseLogReturn {
 
           prevValueRef.current = value
 
-          return () => {
+          return function onUnmount() {
             print({
               label: 'On unmount',
               value: clonedValue,
@@ -102,16 +102,19 @@ export function useLog(): UseLogReturn {
           }
         }, [])
 
-        useEffect(() => {
-          print({
-            label: 'On change',
-            value: clonedValue,
-            type: PrintTypes.Change,
-            prevValue: prevValueRef.current,
-          })
+        useEffect(
+          function onChange() {
+            print({
+              label: 'On change',
+              value: clonedValue,
+              type: PrintTypes.Change,
+              prevValue: prevValueRef.current,
+            })
 
-          prevValueRef.current = value
-        }, [value])
+            prevValueRef.current = value
+          },
+          [value],
+        )
       })()
     }
   }