@stevederico/skateboard-ui 2.9.7 → 2.9.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+2.9.8
+
+  Add useUser hook
+  Add useDispatch hook
+  Update README Context docs
+
 2.9.7
 
   Add useSafeNavigate hook

package/README.md

@@ -770,7 +770,7 @@ import ErrorBoundary from '@stevederico/skateboard-ui/ErrorBoundary';
 ## Context (State Management)
 
 ```javascript
-import { getState } from '@stevederico/skateboard-ui/Context';
+import { getState, useUser, useDispatch } from '@stevederico/skateboard-ui/Context';
 
 function MyComponent() {
   const { state, dispatch } = getState();
@@ -785,6 +785,33 @@ function MyComponent() {
 }
 ```
 
+### Optimized Hooks
+
+Use these hooks to avoid unnecessary re-renders:
+
+```javascript
+import { useUser, useDispatch } from '@stevederico/skateboard-ui/Context';
+
+// Only re-renders when user changes (not on sidebar/theme changes)
+function ProfileCard() {
+  const user = useUser();
+  if (!user) return null;
+  return <div>{user.name}</div>;
+}
+
+// Stable dispatch reference, never causes re-renders
+function SignOutButton() {
+  const dispatch = useDispatch();
+  return <button onClick={() => dispatch({ type: 'CLEAR_USER' })}>Sign Out</button>;
+}
+```
+
+| Hook | Returns | Re-renders on |
+|------|---------|---------------|
+| `getState()` | `{ state, dispatch }` | Any state change |
+| `useUser()` | `user` or `null` | User changes only |
+| `useDispatch()` | `dispatch` | Never (stable) |
+
 ### State Shape
 
 ```javascript

package/core/Context.jsx

@@ -206,3 +206,46 @@ export function ContextProvider({ children, constants }) {
 export function getState() {
   return useContext(context);
 }
+
+/**
+ * Hook to access only the current user.
+ *
+ * More efficient than getState() when you only need user data,
+ * as it avoids re-renders from unrelated state changes.
+ *
+ * @returns {Object|null} Current user object or null if not authenticated
+ *
+ * @example
+ * import { useUser } from '@stevederico/skateboard-ui/Context';
+ *
+ * function ProfileCard() {
+ *   const user = useUser();
+ *   if (!user) return null;
+ *   return <div>{user.name}</div>;
+ * }
+ */
+export function useUser() {
+  const { state } = useContext(context);
+  return state.user;
+}
+
+/**
+ * Hook to access dispatch function.
+ *
+ * Use when you only need to dispatch actions without reading state.
+ * Avoids re-renders since dispatch is stable.
+ *
+ * @returns {Function} Dispatch function
+ *
+ * @example
+ * import { useDispatch } from '@stevederico/skateboard-ui/Context';
+ *
+ * function SignOutButton() {
+ *   const dispatch = useDispatch();
+ *   return <button onClick={() => dispatch({ type: 'CLEAR_USER' })}>Sign Out</button>;
+ * }
+ */
+export function useDispatch() {
+  const { dispatch } = useContext(context);
+  return dispatch;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.9.7",
+  "version": "2.9.8",
   "type": "module",
   "exports": {
     "./Sidebar": {