Kubrickcode Workflow Toolkit React

React Development Standards

Component Structure

Rules Per File Component

Exported components should be one per file when possible; internal components can have multiple if necessary (not recommended).

• Forbid export default (refactoring and tree-shaking issues)
• Use named exports only
• Don't export internal helper components
• File order: Main exported component → Additional exported components → Internal helper components

State Management Rules

State Management Hierarchy

1. Local State (useState): Used only in a single component
2. Props Drilling: Allow maximum 2 levels
3. Context API: Use when 3+ levels of prop drilling needed
4. Global State (Zustand, etc.):
   • Shared across 5+ components
   • Server state synchronization needed
   • Complex state logic (computed, actions)
   • Developer tools support needed

Hook Usage Rules

Custom Hook Extraction Criteria

• 3+ combinations of useState/useEffect
• Reused in 2+ components
• 50+ lines of logic

Minimize useEffect Usage

• useEffect only for external system synchronization
• Handle state updates in event handlers
• Calculate derived values directly or with useMemo
• Use only when truly necessary and comment why

// ❌ Bad: useEffect for state synchronization
useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

// ✅ Good: Direct calculation
const fullName = `${firstName} ${lastName}`;

Props Rules

Rules for Adding Props to Common Components

• Review structure before adding new props (prevent indiscriminate prop additions at shared level)
• Check for single responsibility principle violations
• Consider composition pattern for 3+ optional props
• Review if can be unified with variant prop

Conditional Rendering

Basic Rules

// Simple condition: && operator
{isLoggedIn && <UserMenu />}

// Binary choice: ternary operator
{isLoggedIn ? <UserMenu /> : <LoginButton />}

// Complex condition: separate function or early return
const renderContent = () => {
  if (status === 'loading') return <Loader />;
  if (status === 'error') return <Error />;
  return <Content />;
};

Activity Component

• Use when pre-rendering hidden parts or maintaining state is needed
• Manage with visible/hidden mode
• Utilize for frequently toggled UI like tab switching, modal contents

Memoization

Using React Compiler

• Rely on automatic memoization
• Manual memoization (React.memo, useMemo, useCallback) only for special cases
• Use as escape hatch when compiler cannot optimize

Converted and distributed by TomeVault — claim your Tome and manage your conversions.