import React from "react"; import {LevelUI} from "./warnings"; import {useShopStore} from "./shop_store"; import {compareArraysWithIds} from "./utils"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; export function CrateWarnings({crate_index}) { // #!render_count const renderCount = useRenderCount(); const crate_warnings = useShopStore(state => (state.crates[crate_index].warnings), compareArraysWithIds) // #!render_count console.log("CrateWarnings renders: ", renderCount) return ( <div className="crate-info"> {crate_warnings.map((rule, index) => ( <p key={index} className="rule" style={{'color': LevelUI(rule.level).color}}> <img src={LevelUI(rule.level).icon} /> <i>{rule.message}</i> </p> ))} </div> ) }