# Build a Race-Free Memory Card Game in React Implement the interaction logic for a React memory-card game. Every card has a stable ID and a match value; exactly two cards share each value. Cards begin face down. A click reveals an eligible card. After two different cards are revealed, matching cards remain face up, while a nonmatching pair becomes face down after a short delay. Users may click quickly. Prevent a third card from entering the comparison, ignore clicks on an already revealed or matched card, and ensure a pending mismatch timer cannot corrupt a restarted game or a later turn. ### Constraints & Assumptions - The card list is supplied as props and can be reshuffled when the user restarts. - Card IDs are unique even when values match. - The UI should expose the board state accessibly, not by color alone. - You do not need to implement visual artwork or a backend. ### Clarifying Questions to Ask - Should interaction lock immediately after the second reveal or only during mismatch delay? - What should happen when props change while a timeout is pending? - How are moves and game completion counted? - Is keyboard interaction required in addition to pointer input? ### What a Strong Answer Covers - Minimal, noncontradictory state for selected and matched cards - Functional state updates or reducer transitions that avoid stale closures - Input locking and timeout cleanup across restart and unmount - Stable identity, derived state, accessibility, and focused tests - Clear separation between game logic and rendering ### Follow-up Questions - How would you make the game logic independently testable without React? - When is `useReducer` clearer than several `useState` calls here? - How would you add an animation without making timers the source of truth? - How would you preserve a game across a page refresh?