Derived State

State calculated from other state.

html

<div class="derv" data-a="12" data-b="3" data-op="product">
  <p class="derv__source">price = 12 &nbsp; quantity = 3 <span class="derv__tag">source state</span></p>
  <p class="derv__eq">total = f(price, product, quantity)</p>
  <p class="derv__result" style="color:#A8E6C1;">&nbsp;</p>
  <p class="derv__note">total is never stored &mdash; it's recomputed from price and quantity every render.</p>
</div>
<script>(function () {
  var el = document.querySelector(".derv");
  if (!el) return;
  var a = Number(el.dataset.a), b = Number(el.dataset.b), op = el.dataset.op;
  var result = op === "sum" ? a + b : op === "difference" ? a - b : a * b;
  el.querySelector(".derv__result").textContent = "total = " + result;
})();</script>
<style>
.derv { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.derv__source { margin: 0 0 8px; font-size: 12px; }
.derv__tag { display: block; font-size: 10px; color: #24143099; }
.derv__eq { margin: 0 0 8px; font: 11px ui-monospace, monospace; color: #24143099; }
.derv__result { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.derv__note { margin: 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="dervtw font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border" data-a="12" data-b="3" data-op="product">
  <p class="m-0 mb-2 text-xs">price = 12 &nbsp; quantity = 3 <span class="block text-[10px] text-[#24143099]">source state</span></p>
  <p class="m-0 mb-2 font-mono text-[11px] text-[#24143099]">total = f(price, product, quantity)</p>
  <p class="dervtw__result m-0 mb-2.5 text-2xl font-extrabold" style="color:#A8E6C1;">&nbsp;</p>
  <p class="m-0 text-[10px] text-[#24143099]">total is never stored &mdash; it's recomputed from price and quantity every render.</p>
</div>
<script>(function () {
  var el = document.querySelector(".dervtw");
  if (!el) return;
  var a = Number(el.dataset.a), b = Number(el.dataset.b), op = el.dataset.op;
  var result = op === "sum" ? a + b : op === "difference" ? a - b : a * b;
  el.querySelector(".dervtw__result").textContent = "total = " + result;
})();</script>

react

import { useMemo } from "react";

export function DerivedState({
  a = 12,
  b = 3,
  operation = "product",
  accent = "#A8E6C1",
}) {
  const total = useMemo(() => (operation === "sum" ? a + b : operation === "difference" ? a - b : a * b), [a, b, operation]);
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 8px", fontSize: 12 }}>price = {a} &nbsp; quantity = {b}</p>
      <p style={{ margin: "0 0 8px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>total = f(price, {operation}, quantity)</p>
      <p style={{ margin: "0 0 10px", fontSize: 22, fontWeight: 800, color: accent }}>total = {total}</p>
      <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>total is never stored &mdash; it's recomputed from price and quantity every render.</p>
    </div>
  );
}