From 5cad6f1aaa8ccb7ee8840cc93efd7d66558c22b7 Mon Sep 17 00:00:00 2001
From: Matthew Stanciu <mattbstanciu@gmail.com>
Date: Thu, 16 Nov 2023 22:24:03 -0500
Subject: [PATCH] Fix initial flash of default data

---
 package.json        |  2 +-
 src/react/index.tsx | 46 ++++++++++++++++++++-------------------------
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 876b68d..37f8b74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purduehackers/time",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "description": "convert between traditional time and lightning time ⚡️",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/react/index.tsx b/src/react/index.tsx
index 743b674..0c1a276 100644
--- a/src/react/index.tsx
+++ b/src/react/index.tsx
@@ -1,35 +1,29 @@
-import { useState, useEffect, useRef, useLayoutEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { format as formatTime } from 'date-fns'
 import { LightningTime, MILLIS_PER_CHARGE } from '../time'
 import { Colors } from '../types'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+function calculateInitialData() {
+  const now = new Date()
+  const { lightningString, colors } = new LightningTime().convertToLightning(
+    now
+  )
+  const formattedNormalTime = formatTime(now, 'h:mm a')
+
+  return {
+    lightningString,
+    formattedNormalTime,
+    colors
+  }
+}
 
 export function useLightningTimeClock() {
-  const [lightningTimeClock, setLightningTime] = useState<string>('')
-  const [normalTimeClock, setNormalTime] = useState<string>('')
-  const [timeColors, setTimeColors] = useState<Colors>({
-    boltColor: '',
-    zapColor: '',
-    sparkColor: ''
-  })
-  const isFirstRender = useRef(true)
-
-  useIsomorphicLayoutEffect(() => {
-    if (isFirstRender.current) {
-      const now = new Date()
-      const { lightningString, colors } =
-        new LightningTime().convertToLightning(now)
-      const formattedTime = formatTime(now, 'h:mm a')
-
-      setLightningTime(lightningString)
-      setNormalTime(formattedTime)
-      setTimeColors(colors)
-
-      isFirstRender.current = false
-    }
-  }, [])
+  const { lightningString, formattedNormalTime, colors } =
+    calculateInitialData()
+  const [lightningTimeClock, setLightningTime] =
+    useState<string>(lightningString)
+  const [normalTimeClock, setNormalTime] = useState<string>(formattedNormalTime)
+  const [timeColors, setTimeColors] = useState<Colors>(colors)
 
   useEffect(() => {
     const update = () => {