perf: minor performance improvements, regex in replaceAll

asmyshlyaev177 · Nov 13, 2024 · ea6bc70 · ea6bc70
1 parent bab7990
commit ea6bc70
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 19 deletions.
diff --git a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx
@@ -18,7 +18,6 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {
         onChange={(ev) =>
           setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
         }
-        className=""
         data-testid="select"
       >
         <option>10</option>

diff --git a/packages/example-nextjs14/src/app/Status-for-test.tsx b/packages/example-nextjs14/src/app/Status-for-test.tsx
@@ -11,7 +11,7 @@ const Status = ({ className, sp }: { className?: string; sp?: object }) => {
       <div className="font-semibold mb-2 ">
         Other client component
       </div>
-      <h3 className="">Types and structure of data are presered</h3>
+      <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
         <pre

diff --git a/packages/example-nextjs14/src/app/Status.tsx b/packages/example-nextjs14/src/app/Status.tsx
@@ -24,7 +24,7 @@ export const Status = ({
       <div className="font-semibold mb-2 ">
         Other client component
       </div>
-      <h3 className="">Types and structure of data are presered</h3>
+      <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
         <pre

diff --git a/packages/example-nextjs15/src/app/Status-for-test.tsx b/packages/example-nextjs15/src/app/Status-for-test.tsx
@@ -11,7 +11,7 @@ const Status = ({ className, sp }: { className?: string; sp?: object }) => {
       <div className="font-semibold mb-2">
         Other client component
       </div>
-      <h3 className="">Types and structure of data are presered</h3>
+      <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
         <pre

diff --git a/packages/example-react-router6/src/FewComponents/Component.tsx b/packages/example-react-router6/src/FewComponents/Component.tsx
@@ -17,7 +17,6 @@ export const Component = () => {
         onChange={(ev) =>
           setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
         }
-        className=""
         data-testid="select"
       >
         <option>10</option>

diff --git a/packages/example-react-router6/src/Status-for-test.tsx b/packages/example-react-router6/src/Status-for-test.tsx
@@ -8,7 +8,7 @@ const Status = ({ className }: { className?: string }) => {
   return (
     <div className={className}>
       <div className="font-semibold mb-2">Other client component</div>
-      <h3 className="">Types and structure of data are presered</h3>
+      <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
         <pre

diff --git a/packages/urlstate/encoder/encoder.ts b/packages/urlstate/encoder/encoder.ts
@@ -24,8 +24,8 @@ export function encode(payload: unknown): string {
       return SYMBOLS.undefined;
     default:
       return JSON.stringify(payload)
-        .replaceAll("'", "%27")
-        .replaceAll('"', "'");
+        .replaceAll(/'/g, "%27")
+        .replaceAll(/"/g, "'");
   }
 }
 
@@ -49,7 +49,7 @@ export type Primitive = Exclude<
  */
 export function decode<T>(payload: string, fallback?: T) {
   return parseJSON(
-    payload.replaceAll("'", '"').replaceAll("%27", "'"),
+    payload.replaceAll(/'/g, '"').replaceAll(/%27/g, "'"),
     fallback as JSONCompatible,
   );
 }

diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts
@@ -229,7 +229,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50');
       });
 
       it('partial shape', async () => {
@@ -244,7 +244,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50');
       });
 
       it('no arg, should reset', async () => {
@@ -262,7 +262,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50');
       });
     });
 
@@ -278,7 +278,7 @@ describe('useUrlStateBase', () => {
 
       expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
       expect(router.push).toHaveBeenCalledTimes(1);
-      expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+      expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50');
     });
 
     it('do not update if url same', () => {
@@ -312,7 +312,7 @@ describe('useUrlStateBase', () => {
       await new Promise(process.nextTick);
 
       expect(router.push).toHaveBeenCalledTimes(1);
-      expect(router.push).toHaveBeenNthCalledWith(1, `/?num=55${hash}`, {});
+      expect(router.push).toHaveBeenNthCalledWith(1, `/?num=55${hash}`);
     });
 
     it('replace and options', async () => {

diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
@@ -83,9 +83,9 @@ export function useUrlStateBase<T extends JSONCompatible>(
       let upd: (typeof queue.current)[0] | undefined;
       setState(newVal);
 
-      const { replace, ...rOptions } = options || {};
-
-      queue.current.push([replace ? "replace" : "push", newUrl, rOptions]);
+      const replace = options?.replace;
+      delete options?.replace;
+      queue.current.push([replace ? "replace" : "push", newUrl, options]);
 
       if (queue.current.length === 1)
         queueMicrotask(() => {
@@ -129,7 +129,7 @@ function getOtherParams<T extends object>(shape: T) {
 type UpdateQueueItem = [
   method: "push" | "replace",
   url: string,
-  opts: Partial<Options>,
+  opts?: Partial<Options>,
 ];
 
 const popstateEv = "popstate";

diff --git a/packages/urlstate/utils.ts b/packages/urlstate/utils.ts
@@ -92,7 +92,7 @@ function filterUnknown<T extends object>(
 
   return entries
     .filter(([key]) => shapeKeys.includes(key))
-    .map(([key, val]) => [key.replaceAll("+", " "), val]);
+    .map(([key, val]) => [key.replaceAll(/\+/g, " "), val]);
 }
 
 export function assignValue<T extends object>(shape: T, newVal: Partial<T>) {