docs: accent on useHistory param for next.js

asmyshlyaev177 · Dec 9, 2024 · 171bcf9 · 171bcf9
1 parent db8e27b
commit 171bcf9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -171,7 +171,7 @@ import { userState } from './userState';
 
 function MyComponent() {
   // can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true
-  // can pass `searchParams` from server components
+  // can pass `searchParams` from server components, pass `useHistory: false` if you need to fetch smt in the server component
   const { urlState, setUrl, setState, reset } = useUrlState(userState);
 
   return (

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx b/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx
@@ -24,7 +24,8 @@ import { form } from './form';
 
 export const ComponentA = () => {
   // see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState
-  const { urlState, setState, setUrl } = useUrlState(form);// [!code highlight:1]
+  // useHistory: false to update sp on server component
+  const { urlState, setState, setUrl } = useUrlState(form, { useHistory: true }); // [!code highlight:1]
 
   return <>
     <input

diff --git a/packages/example-nextjs14/src/app/Status.tsx b/packages/example-nextjs14/src/app/Status.tsx
@@ -78,7 +78,7 @@ function renderObject(obj: object | Array<SimpleVal> | SimpleVal, level = 0, par
 
   if (type === 'object') {
     return (
-      <span className='relative'>
+      <span className='relative' key={`${JSON.stringify(obj)}`}>
         <span>{'{'}</span>
         {Object.entries(obj as Object).map(([key, val])=> (
           <div style={{ marginLeft: (level + 2) * mult }} key={key} className=''>