Computed

hero-context.js

import React, { createContext } from "react";
import { useLocalStore } from "mobx-react-lite";
import {
  deleteHero,
  getHeroById,
  getHeroes,
  postHero,
  putHero
} from "./hero-service";

export const HeroProvider = ({ children }) => {
  const store = useLocalStore(() => ({
    /*observables here*/
    /*actions here*/
    /*computed values i.e. derived state*/
    get totalHeroes() {
      return store.heroes.length;
    }
  }));
  return <heroContext.Provider value={store}>{children}</heroContext.Provider>;
};
export const heroContext = createContext();