import React from 'react'; import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that displays crate modes */ export function CrateMode({crate_index}) { // #!render_count const renderCount = useRenderCount(); const modes_order = useShopStore((state) => state.modes_order); const crate_modes = useShopStore((state) => state.crate_modes); const crate = useShopStore((state) => state.crates[crate_index], (a, b) => a.id === b.id && a.crate_mode === b.crate_mode); const setMode = useShopStore((state) => state.setCrateMode); // #!render_count console.log("CrateMode renders: ", renderCount) return (
{modes_order.map((mode_name, _) => ( setMode(crate.id, mode_name)} href="#" role="button">{crate_modes[mode_name].name} ))}
); }