diff --git a/docs/apis/create-with-equality-fn.md b/docs/apis/create-with-equality-fn.md
index 4c99be90f6..4390b3607f 100644
--- a/docs/apis/create-with-equality-fn.md
+++ b/docs/apis/create-with-equality-fn.md
@@ -81,7 +81,8 @@ const useAgeStore = createWithEqualityFn<AgeStore>()(
 )
 
 export default function App() {
-  const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
+  const age = useAgeStore((state) => stage.age)
+  const setAge = useAgeStore((state) => state.setAge)
 
   function increment() {
     setAge((currentAge) => currentAge + 1)
diff --git a/docs/apis/create.md b/docs/apis/create.md
index 3c5f59fadb..cee7896060 100644
--- a/docs/apis/create.md
+++ b/docs/apis/create.md
@@ -75,7 +75,8 @@ const useAgeStore = create<AgeStore>()((set) => ({
 }))
 
 export default function App() {
-  const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
+  const age = useAgeStore((state) => state.age)
+  const setAge = useAgeStore((state) => state.setAge)
 
   function increment() {
     setAge((currentAge) => currentAge + 1)
diff --git a/docs/hooks/use-store-with-equality-fn.md b/docs/hooks/use-store-with-equality-fn.md
index b0467c04e9..a51142743c 100644
--- a/docs/hooks/use-store-with-equality-fn.md
+++ b/docs/hooks/use-store-with-equality-fn.md
@@ -52,19 +52,18 @@ store to manage `x` and `y` coordinates and provide an action to update these co
 ```tsx
 import { createStore, useStore } from 'zustand'
 
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const positionStore = createStore<PositionStore>()((set) => ({
-  x: 0,
-  y: 0,
-  setPosition: (nextPosition) => {
-    set(nextPosition)
+  position: { x: 0, y: 0 },
+  setPosition: (position) => {
+    set({ position })
   },
 }))
 ```
@@ -74,9 +73,14 @@ will use the store to track and update the dot's position.
 
 ```tsx
 function MovingDot() {
-  const [position, setPosition] = useStoreWithEqualityFn(
+  const position = useStoreWithEqualityFn(
     positionStore,
-    (state) => [{ x: state.x, y: state.y }, state.setPosition],
+    (state) => state.position,
+    shallow,
+  )
+  const setPosition = useStoreWithEqualityFn(
+    positionStore,
+    (state) => state.setPosition,
     shallow,
   )
 
@@ -126,26 +130,30 @@ import { createStore } from 'zustand'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { shallow } from 'zustand/shallow'
 
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const positionStore = createStore<PositionStore>()((set) => ({
-  x: 0,
-  y: 0,
-  setPosition: (nextPosition) => {
-    set(nextPosition)
+  position: { x: 0, y: 0 },
+  setPosition: (position) => {
+    set({ position })
   },
 }))
 
 function MovingDot() {
-  const [position, setPosition] = useStoreWithEqualityFn(
+  const position = useStoreWithEqualityFn(
+    positionStore,
+    (state) => state.position,
+    shallow,
+  )
+  const setPosition = useStoreWithEqualityFn(
     positionStore,
-    (state) => [{ x: state.x, y: state.y }, state.setPosition],
+    (state) => state.setPosition,
     shallow,
   )
 
@@ -423,20 +431,19 @@ First, let's set up a store that will hold the position of the dot on the screen
 store to manage `x` and `y` coordinates and provide an action to update these coordinates.
 
 ```tsx
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const createPositionStore = () => {
   return createStore<PositionStore>()((set) => ({
-    x: 0,
-    y: 0,
-    setPosition: (nextPosition) => {
-      set(nextPosition)
+    position: { x: 0, y: 0 },
+    setPosition: (position) => {
+      set({ position })
     },
   }))
 }
@@ -483,9 +490,8 @@ within its container.
 
 ```tsx
 function MovingDot({ color }: { color: string }) {
-  const [position, setPosition] = usePositionStore(
-    (state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
-  )
+  const position = usePositionStore((state) => state.position)
+  const setPosition = usePositionStore((state) => state.setPosition)
 
   return (
     <div
@@ -547,20 +553,19 @@ import { createStore } from 'zustand'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { shallow } from 'zustand/shallow'
 
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const createPositionStore = () => {
   return createStore<PositionStore>()((set) => ({
-    x: 0,
-    y: 0,
-    setPosition: (nextPosition) => {
-      set(nextPosition)
+    position: { x: 0, y: 0 },
+    setPosition: (position) => {
+      set({ position })
     },
   }))
 }
@@ -592,9 +597,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
 }
 
 function MovingDot({ color }: { color: string }) {
-  const [position, setPosition] = usePositionStore(
-    (state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
-  )
+  const position = usePositionStore((state) => state.position)
+  const setPosition = usePositionStore((state) => state.setPosition)
 
   return (
     <div
diff --git a/docs/hooks/use-store.md b/docs/hooks/use-store.md
index 5d2418a244..701827c480 100644
--- a/docs/hooks/use-store.md
+++ b/docs/hooks/use-store.md
@@ -46,19 +46,18 @@ First, let's set up a store that will hold the position of the dot on the screen
 store to manage `x` and `y` coordinates and provide an action to update these coordinates.
 
 ```tsx
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const positionStore = createStore<PositionStore>()((set) => ({
-  x: 0,
-  y: 0,
-  setPosition: (nextPosition) => {
-    set(nextPosition)
+  position: { x: 0, y: 0 },
+  setPosition: (position) => {
+    set({ position })
   },
 }))
 ```
@@ -68,10 +67,8 @@ will use the store to track and update the dot's position.
 
 ```tsx
 function MovingDot() {
-  const [position, setPosition] = useStore(positionStore, (state) => [
-    { x: state.x, y: state.y },
-    state.setPosition,
-  ])
+  const position = useStore(positionStore, (state) => state.position)
+  const setPosition = useStore(positionStore, (state) => state.setPositionStore)
 
   return (
     <div
@@ -117,27 +114,24 @@ Here is what the code should look like:
 ```tsx
 import { createStore, useStore } from 'zustand'
 
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const positionStore = createStore<PositionStore>()((set) => ({
-  x: 0,
-  y: 0,
-  setPosition: (nextPosition) => {
-    set(nextPosition)
+  position: { x: 0, y: 0 },
+  setPosition: (position) => {
+    set({ position })
   },
 }))
 
 function MovingDot() {
-  const [position, setPosition] = useStore(positionStore, (state) => [
-    { x: state.x, y: state.y },
-    state.setPosition,
-  ])
+  const position = useStore(positionStore, (state) => state.position)
+  const setPosition = useStore(positionStore, (state) => state.setPositionStore)
 
   return (
     <div
@@ -405,20 +399,19 @@ First, let's set up a store that will hold the position of the dot on the screen
 store to manage `x` and `y` coordinates and provide an action to update these coordinates.
 
 ```tsx
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const createPositionStore = () => {
   return createStore<PositionStore>()((set) => ({
-    x: 0,
-    y: 0,
-    setPosition: (nextPosition) => {
-      set(nextPosition)
+    position: { x: 0, y: 0 },
+    setPosition: (position) => {
+      set({ position })
     },
   }))
 }
@@ -465,9 +458,8 @@ within its container.
 
 ```tsx
 function MovingDot({ color }: { color: string }) {
-  const [position, setPosition] = usePositionStore(
-    (state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
-  )
+  const position = usePositionStore((state) => state.position)
+  const setPosition = usePositionStore((state) => state.setPosition)
 
   return (
     <div
@@ -527,20 +519,19 @@ Here is what the code should look like:
 import { type ReactNode, useState, createContext, useContext } from 'react'
 import { createStore, useStore } from 'zustand'
 
-type PositionStoreState = { x: number; y: number }
+type PositionStoreState = { position: { x: number; y: number } }
 
 type PositionStoreActions = {
-  setPosition: (nextPosition: Partial<PositionStoreState>) => void
+  setPosition: (nextPosition: PositionStoreState['position']) => void
 }
 
 type PositionStore = PositionStoreState & PositionStoreActions
 
 const createPositionStore = () => {
   return createStore<PositionStore>()((set) => ({
-    x: 0,
-    y: 0,
-    setPosition: (nextPosition) => {
-      set(nextPosition)
+    position: { x: 0, y: 0 },
+    setPosition: (position) => {
+      set({ position })
     },
   }))
 }
@@ -572,9 +563,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
 }
 
 function MovingDot({ color }: { color: string }) {
-  const [position, setPosition] = usePositionStore(
-    (state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
-  )
+  const position = usePositionStore((state) => state.position)
+  const setPosition = usePositionStore((state) => state.setPosition)
 
   return (
     <div