# Mayrlabs Framework React > React standard enforcing functional components, custom hooks, strict separation of state from UI, and memoization. - Skill: `tomevault-io/mayrlabs-framework-react` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/mayrlabs-framework-react` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/mayrlabs-framework-react/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/mayrlabs-framework-react --- # MayR Labs React Doctrine ## Purpose To maintain scalable and performant React applications by eliminating bloated components, prop-drilling, and unstructured side-effects. ## Audience AI Agents scaffolding structural React UI, creating components, or managing frontend state. ## Core Rules & Constraints ### 1. Functional Components Only - No class components. Always use functional components and hooks. - Use explicit return typing (`React.FC` is discouraged, just type the parameters and return `JSX.Element` natively). ### 2. Isolate Business Logic - Components (UI) must be "dumb". If a component is managing complex state transitions, fetching data directly, or applying business logic, extract it. - **Custom Hooks**: Abstract heavy logic into `use[Feature]` custom hooks to keep the UI layer strictly declarative. ### 3. State & Effects - Avoid setting state inside a `useEffect` if the state can be computed directly from props during render. - If an object or array is a dependency in `useEffect`, ensure it is memoized (`useMemo`, `useCallback`) to prevent infinite re-render loops. ## Inputs & Outputs - **Input**: Editing `.jsx` or `.tsx` React files. - **Output**: Predictable, clean, and isolated functional React components. --- > Source: [MayR-Labs/skills](https://github.com/MayR-Labs/skills) — distributed by [TomeVault](https://tomevault.io).