refactor: clearer initial state

Author: wanjas

apps/docs/components/DelayedRender.tsx

@@ -0,0 +1,17 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+export function DelayedRender({ children }: { children: ReactNode }) {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsReady(true);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return isReady ? <>{children}</> : null;
+}

apps/docs/components/examples/InitialValue.tsx

@@ -1,4 +1,3 @@
-import { Callout } from 'nextra/components';
 import { useUrlState } from 'react-use-url-state';
 import { z } from 'zod';
 
@@ -18,7 +17,7 @@ export function InitialValue({
       from: z.coerce.date().optional(),
     }),
     {
-      search: 'init',
+      search: applyInitialValue ? 'init-apply' : 'init-not-apply',
       limit: 1,
       from: new Date('1000-01-01'),
     },

apps/docs/pages/examples/initial-value-applied.mdx

@@ -1,4 +1,5 @@
 import { Callout } from 'nextra/components';
+import { DelayedRender } from '../../components/DelayedRender';
 import { InitialValue } from '../../components/examples/InitialValue';
 
 # Initial value (applied to URL)
@@ -41,4 +42,7 @@ return (
 );
 ```
 
-<InitialValue applyInitialValue={true} />
+<DelayedRender>
+  {/* Fix for a weird on page load "rollback of URL params to empty. Not happening if another page is open first */}
+  <InitialValue applyInitialValue={true} />
+</DelayedRender>

packages/core/src/index.ts

@@ -46,13 +46,6 @@ export function useUrlState<T extends DefaultSchema>(
     () => new GenericRouter(update, {}),
   );
 
-  useEffect(() => {
-    router.init();
-    return () => {
-      router.destroy();
-    };
-  }, [router]);
-
   return useUrlStateWithRouter(schema, initialValue || null, {
     applyInitialValue: false,
     ...options,
@@ -66,7 +59,6 @@ export function useUrlStateWithRouter<T extends DefaultSchema>(
   options: UrlStateOptions & { router: UrlStateRouter },
 ): UrlState<T> & UrlStateMethods<T> {
   const schemaRef = useRef(schema);
-
   const cachedInitialValue = useShallowEqualValue(initialValue);
 
   const [state, setState] = useState<UrlState<T>>({
@@ -76,6 +68,7 @@ export function useUrlStateWithRouter<T extends DefaultSchema>(
     isReady: false,
   });
 
+  // needed it order to make handler functions stable
   const stateRef = useRef(state);
   stateRef.current = state;
 
@@ -86,7 +79,7 @@ export function useUrlStateWithRouter<T extends DefaultSchema>(
     const validationResult = schemaRef.current.safeParse(object);
 
     const result = validationResult.success
-      ? { success: true, data: validationResult.data, error: null }
+      ? { success: true, data: validationResult.data ?? null, error: null }
       : { success: false, data: object, error: validationResult.error };
 
     setState({
@@ -105,28 +98,34 @@ export function useUrlStateWithRouter<T extends DefaultSchema>(
     };
   }, [recalculateState]);
 
+  useEffect(() => {
+    if (state.isReady) {
+      options.router.init();
+    }
+    return () => {
+      options.router.destroy();
+    };
+  }, [options.router, state.isReady]);
+
   const push = usePush(options.router);
 
   const handlers = useHandlers<T>(push, stateRef);
 
   // set the state from initial url
   useEffect(() => {
-    if (!cachedInitialValue) {
-      update(window.location.search);
-    } else if (
-      state.isReady &&
-      options.applyInitialValue &&
-      cachedInitialValue &&
-      searchIsEmpty(window.location.search)
-    ) {
-      handlers.setState({ ...state.data, ...cachedInitialValue });
+    const searchString = window.location.search;
+
+    if (!searchIsEmpty(searchString)) {
+      update(searchString);
+    } else if (cachedInitialValue && options.applyInitialValue) {
+      handlers.setState(cachedInitialValue);
     } else {
       setState((st) => ({
         ...st,
         isReady: true,
       }));
     }
-  }, [state.isReady, cachedInitialValue, options.applyInitialValue]);
+  }, [cachedInitialValue, options.applyInitialValue]);
 
   return { ...state, ...handlers };
 }

packages/core/src/utils.ts

@@ -71,6 +71,7 @@ function shallowEqual<T>(a: T, b: T) {
 export function useShallowEqualValue<T>(value: T) {
   const ref = useRef(value);
   if (!shallowEqual(value, ref.current)) {
+    console.log('not equal');
     ref.current = value;
   }
   return ref.current;