You can use a combination of filter to filter only the proper category, and then reduce to sum values

const [fit, setFit] = useState(
    arr.filter(f => f.category === "fit").reduce((acc, c) => acc + c.cost, 0)
)

However, you'll need to do it for each state, which might be a little redondant, so I think it's best to have only one state, with a "category array" which you can map thru to create your state with X categories. Something like that

const [state, setState] = useState(
    ['fit', 'fat', 'slim', 'test'].reduce((cats, currentCat) => ({
        ...cats,
        [currentCat]: arr.filter(f => f.category === currentCat).reduce((acc, c) => acc + c.cost, 0)
    }), {})
)

So if you need to add categories, you just have to add them in your array, and you can access each costs using state.fit, state.fat,...

I didn't like the other answers. This one is different in that it will create an object based on all the properties in your array, dynamically uses useEffect, and only iterates through your array once.

const arr = [
  {id: '222', cost: 2, category: 'fit'},
  {id: '333', cost: 3, category: 'fat'},
  {id: '11', cost: 1, category: 'fat'},
  {id: '11', cost: 0, category: 'fit'},
  {id: '33', cost: 55, category: 'slim'},
  {id: '55', cost: 33, category: 'slim'},
  {id: '123', cost: 4, category: 'slim'}
];

// reduce list to an object of total costs
const values = arr.reduce((a, b) => {
  if (!a[b.category]) a[b.category] = b.cost;
  else a[b.category] += b.cost;
  return a;
}, {});
console.log(values);

// create your values and setters in an object
const effects = {};
for (let key in values) {
  let [val, set] = useEffect(values[key]); // useEffect is not defined on StackOverflow
  effects[key] = {val, set};
}
/*
Creates obj with this structure:
{
  "fit": {
    "val": fit,
    "set": setFit,
  },
  ...
}
*/

You can create the function with reduce. Like this:

const arr = [
  { id: "222", cost: 2, category: "fit" },
  { id: "333", cost: 3, category: "fat" },
  { id: "11", cost: 1, category: "fat" },
  { id: "11", cost: 0, category: "fit" },
  { id: "33", cost: 55, category: "slim" },
  { id: "55", cost: 33, category: "slim" },
  { id: "123", cost: 4, category: "slim" }
];
const sumArrBy = (arr = [], category = "") =>
  arr.reduce(
    (prev, { cost, category: cat }) =>
      cat === category ? prev + cost : prev,
    0
  );

console.log(sumArrBy(arr, 'fit'))
console.log(sumArrBy(arr, 'fat'))
console.log(sumArrBy(arr, 'slim'))

Then you can set your state like this:

const [fit] = useState(sumArrBy(arr, "fit"));
const [fat] = useState(sumArrBy(arr, "fat"));
const [slim] = useState(sumArrBy(arr, "slim"));

Full code:

export default function App() {
  const arr = [
    { id: "222", cost: 2, category: "fit" },
    { id: "333", cost: 3, category: "fat" },
    { id: "11", cost: 1, category: "fat" },
    { id: "11", cost: 0, category: "fit" },
    { id: "33", cost: 55, category: "slim" },
    { id: "55", cost: 33, category: "slim" },
    { id: "123", cost: 4, category: "slim" }
  ];
  const sumArrBy = (arr = [], category = "") =>
    arr.reduce(
      (prev, { cost, category: cat }) =>
        cat === category ? prev + cost : prev,
      0
    );

  const [fit] = useState(sumArrBy(arr, "fit"));
  const [fat] = useState(sumArrBy(arr, "fat"));
  const [slim] = useState(sumArrBy(arr, "slim"));

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        {fit}, {fat}, {slim}{" "}
      </div>
    </div>
  );
}

The working demo you can find here - codesandbox

EDIT: Other solutions for this issue have the "filter" function, which is not necessarily, because it makes another loop to filter values. In my case, I don't use the "filter". My solution is checking the category directly in the "reduce". It checks the category, and if the category is true, the function adds value cost to the results, if not, it skips and returns the previous correctly value.