Derived State

🧠 A Common Technique We All Use

You’ve probably had to compute one piece of state from another — that’s derived state.

Most state libraries introduce abstractions or custom logic for this. useS does not.

It lets you use the JavaScript you already know. No special syntax. No new mental models. Just state and logic.

⚙️ Using Functions as State Properties

You can define functions as part of your state object:

Component.tsx


import { useS } from "use-s-react";
 
type CartType = {
  cart: number[];
  total: (cart: number[]) => number;
  thanks: (total: number) => string;
};
 
const initialValue: CartType = {
  cart: [1, 2, 3, 4],
  total: function (cart: number[]) {
    return cart.reduce((sum: number, item: number) => sum + item, 0);
  },
  thanks: function (total: number) {
    return `Thanks for your purchase of: ${total}`;
  },
};
 
export default function Component() {
  const [{ cart, total, thanks }, setState] = useS(initialValue);
 
  return (
    <div>
      <h1>Total: {total(cart)}</h1>
      <h3>{thanks(total(cart))}</h3>
 
      <ul>
        <p>cart:</p>
        {cart.map((i, index) => (
          <li key={i + index + "key"}>{i}</li>
        ))}
      </ul>
 
      <button
        onClick={() =>
          setState((prev) => ({ cart: [...prev.cart, prev.cart.length + 1] }))
        }
      >
        + 1 Price
      </button>
    </div>
  );
}

🧩 How It Works

total is a function that derives value from cart
thanks is a function that uses the result of total
React automatically re-renders when state changes, and the functions respond accordingly
No unnecessary re-renderings

This is derived state, the useS way: No useEffect, no custom hooks, no useMemo. Just logic.

🌍 Global Derived State

If you need this logic across components, simply place the initial value in your Global Store and reuse it anywhere via:


const [state] = useS(store.globalCart);

With useS, derived logic stays close to your data, and everything stays declarative and scalable.