// Function declaration
function Welcome() {
  return <h1>Hello</h1>;
}

// Arrow function with explicit return
const Greeting = () => {
  return <h1>Hi there</h1>;
};

// Arrow function with implicit return
const SimpleComp = () => (<div>Simple</div>);

// With props destructuring
const User = ({ name, age }) => (
  <div>{name}, {age}</div>
);

const UserCard = ({ user, isOnline }) => {
  const greeting = 'Welcome';
  
  return (
    <div className="card">
      {/* Dynamic content */}
      <h2>{greeting}, {user.name}!</h2>
      
      {/* Expressions */}
      <p>Age: {user.age * 2}</p>
      
      {/* Method calls */}
      <p>{user.email.toLowerCase()}</p>
      
      {/* Dynamic attributes */}
      <img src={user.avatar} alt={user.name} />
      <span className={isOnline ? 'active' : 'inactive'}>
        {isOnline ? 'Online' : 'Offline'}
      </span>
    </div>
  );
};

// Basic destructuring with defaults
const Button = ({ 
  text = 'Click', 
  onClick, 
  disabled = false 
}) => (
  <button onClick={onClick} disabled={disabled}>
    {text}
  </button>
);

// Rest props and spreading
const Input = ({ label, ...inputProps }) => (
  <div>
    <label>{label}</label>
    <input {...inputProps} />
  </div>
);

// Nested destructuring
const UserProfile = ({ 
  user: { name, email, address: { city } } 
}) => (
  <div>
    <h2>{name}</h2>
    <p>{email}</p>
    <p>City: {city}</p>
  </div>
);

// Usage with explicit props
<Input label="Email" type="email" placeholder="Enter email" />

// Simple children wrapper
const Card = ({ children, title }) => (
  <div className="card">
    <h3>{title}</h3>
    <div className="card-body">{children}</div>
  </div>
);

// Render props pattern
const DataProvider = ({ children, data }) => (
  <div>{children(data)}</div>
);

// Usage
<DataProvider data={users}>
  {(users) => (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  )}
</DataProvider>

// Named slots pattern
const Layout = ({ header, children, footer }) => (
  <div>
    <header>{header}</header>
    <main>{children}</main>
    <footer>{footer}</footer>
  </div>
);

// Composition
<Layout 
  header={<Nav />}
  footer={<Footer />}
>
  <Card title="Welcome">
    <p>Content here</p>
  </Card>
</Layout>

const UserStatus = ({ user, isLoading, error }) => {
  // Early return for loading
  if (isLoading) return <Spinner />;
  
  // Early return for error
  if (error) return <Error message={error} />;
  
  // Early return for no data
  if (!user) return null;
  
  return (
    <div>
      {/* Ternary operator */}
      {user.isPremium ? (
        <PremiumBadge />
      ) : (
        <FreeBadge />
      )}
      
      {/* Logical AND */}
      {user.notifications && (
        <NotificationBadge count={user.notifications} />
      )}
      
      {/* Nullish coalescing */}
      <p>Score: {user.score ?? 0}</p>
      
      {/* Multiple conditions with element variable */}
      {(() => {
        if (user.role === 'admin') return <AdminPanel />;
        if (user.role === 'moderator') return <ModPanel />;
        return <UserPanel />;
      })()}
    </div>
  );
};

// Element variable pattern
const StatusDisplay = ({ status }) => {
  let statusElement;
  
  switch(status) {
    case 'success':
      statusElement = <SuccessIcon />;
      break;
    case 'error':
      statusElement = <ErrorIcon />;
      break;
    default:
      statusElement = <InfoIcon />;
  }
  
  return <div>{statusElement}</div>;
};

import { Fragment } from 'react';

// Short syntax - most common
const UserInfo = () => (
  <>
    <h1>User Profile</h1>
    <p>Details</p>
  </>
);

// With key prop (required in lists)
const GlossaryList = ({ items }) => (
  <dl>
    {items.map(item => (
      <Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.description}</dd>
      </Fragment>
    ))}
  </dl>
);

// Avoiding unnecessary divs
const Table = () => (
  <table>
    <tbody>
      {data.map(row => (
        <>
          <tr key={row.id}>
            <td>{row.name}</td>
          </tr>
          {row.details && (
            <tr>
              <td colSpan="2">{row.details}</td>
            </tr>
          )}
        </>
      ))}
    </tbody>
  </table>
);

// Conditional multiple elements
const Form = ({ showHelp }) => (
  <form>
    <input type="text" />
    {showHelp && (
      <>
        <p>Help text</p>
        <button>Learn More</button>
      </>
    )}
  </form>
);

import { useState } from 'react';

// Basic counter
const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* Functional update - safer for async */}
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
    </div>
  );
};

// Lazy initialization
const ExpensiveComponent = () => {
  const [data, setData] = useState(() => {
    return computeExpensiveValue();
  });
  
  return <div>{data}</div>;
};

// Object state with spreading
const Form = () => {
  const [form, setForm] = useState({ name: '', email: '' });
  
  const updateField = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }));
  };
  
  return (
    <form>
      <input 
        value={form.name}
        onChange={(e) => updateField('name', e.target.value)}
      />
      <input 
        value={form.email}
        onChange={(e) => updateField('email', e.target.value)}
      />
    </form>
  );
};

// Array state operations
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  
  const addTodo = (text) => {
    setTodos(prev => [...prev, { id: Date.now(), text }]);
  };
  
  const removeTodo = (id) => {
    setTodos(prev => prev.filter(t => t.id !== id));
  };
  
  const updateTodo = (id, newText) => {
    setTodos(prev => prev.map(t => 
      t.id === id ? { ...t, text: newText } : t
    ));
  };
  
  return <ul>{/* render todos */}</ul>;
};

import { useState, useEffect } from 'react';

// Data fetching with cleanup
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    let isMounted = true; // Cleanup flag
    
    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await fetch(\`/api/users/\${userId}\`);
        const data = await response.json();
        if (isMounted) setUser(data);
      } catch (error) {
        if (isMounted) console.error(error);
      } finally {
        if (isMounted) setLoading(false);
      }
    };
    
    fetchUser();
    
    return () => {
      isMounted = false; // Prevent state update after unmount
    };
  }, [userId]); // Re-fetch when userId changes
  
  if (loading) return <div>Loading...</div>;
  return <div>{user?.name}</div>;
};

// Timer with cleanup
const Timer = () => {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    
    return () => clearInterval(interval); // Cleanup
  }, []); // Empty deps - mount only
  
  return <div>{seconds}s</div>;
};

// Event listener with cleanup
const WindowSize = () => {
  const [size, setSize] = useState({ 
    width: window.innerWidth, 
    height: window.innerHeight 
  });
  
  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []); // No dependencies
  
  return <div>{size.width} x {size.height}</div>;
};

// Multiple effects for separation of concerns
const ChatRoom = ({ roomId }) => {
  const [messages, setMessages] = useState([]);
  
  // Effect 1: Connect to chat
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  
  // Effect 2: Load message history
  useEffect(() => {
    loadMessages(roomId).then(setMessages);
  }, [roomId]);
  
  // Effect 3: Update document title
  useEffect(() => {
    document.title = \`Chat: \${roomId}\`;
    return () => { document.title = 'App'; };
  }, [roomId]);
  
  return <div>{/* UI */}</div>;
};

import { createContext, useContext, useState } from 'react';

// 1. Create context
const ThemeContext = createContext('light');

// 2. Create provider component
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. Create custom hook for easier consumption
const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
};

// 4. Consume context in components
const Header = () => {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header className={theme}>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'dark' : 'light'}
      </button>
    </header>
  );
};

const Content = () => {
  const { theme } = useTheme();
  return <div className={theme}>Content</div>;
};

// 5. App with provider
const App = () => (
  <ThemeProvider>
    <Header />
    <Content />
  </ThemeProvider>
);

// Multiple contexts example
const AuthContext = createContext(null);
const SettingsContext = createContext({});

const Dashboard = () => {
  const auth = useContext(AuthContext);
  const settings = useContext(SettingsContext);
  const theme = useContext(ThemeContext);
  
  return <div>{auth.user.name}</div>;
};

import { useReducer } from 'react';

// Action types
const ACTIONS = {
  ADD_TODO: 'add_todo',
  TOGGLE_TODO: 'toggle_todo',
  DELETE_TODO: 'delete_todo',
  SET_FILTER: 'set_filter'
};

// Reducer function
const todoReducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, {
          id: Date.now(),
          text: action.payload,
          completed: false
        }]
      };
      
    case ACTIONS.TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
      
    case ACTIONS.DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(t => t.id !== action.payload)
      };
      
    case ACTIONS.SET_FILTER:
      return { ...state, filter: action.payload };
      
    default:
      return state;
  }
};

// Component using useReducer
const TodoApp = () => {
  const initialState = {
    todos: [],
    filter: 'all'
  };
  
  const [state, dispatch] = useReducer(todoReducer, initialState);
  
  const addTodo = (text) => {
    dispatch({ type: ACTIONS.ADD_TODO, payload: text });
  };
  
  const toggleTodo = (id) => {
    dispatch({ type: ACTIONS.TOGGLE_TODO, payload: id });
  };
  
  const deleteTodo = (id) => {
    dispatch({ type: ACTIONS.DELETE_TODO, payload: id });
  };
  
  const filteredTodos = state.todos.filter(todo => {
    if (state.filter === 'active') return !todo.completed;
    if (state.filter === 'completed') return todo.completed;
    return true;
  });
  
  return (
    <div>
      <input onSubmit={(e) => {
        addTodo(e.target.value);
        e.target.value = '';
      }} />
      
      <ul>
        {filteredTodos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>✕</button>
          </li>
        ))}
      </ul>
      
      <div>
        {['all', 'active', 'completed'].map(filter => (
          <button
            key={filter}
            onClick={() => dispatch({ 
              type: ACTIONS.SET_FILTER, 
              payload: filter 
            })}
          >
            {filter}
          </button>
        ))}
      </div>
    </div>
  );
};

import { useMemo, useCallback, memo } from 'react';

// useMemo for expensive computations
const DataTable = ({ data, filterText }) => {
  // Memoize filtered and sorted data
  const processedData = useMemo(() => {
    console.log('Processing data...'); // Only logs when deps change
    return data
      .filter(item => item.name.includes(filterText))
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [data, filterText]);
  
  return (
    <table>
      {processedData.map(item => (
        <tr key={item.id}><td>{item.name}</td></tr>
      ))}
    </table>
  );
};

// useCallback to memoize functions
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // Without useCallback - new function every render
  const handleClick = () => {
    console.log('Clicked');
  };
  
  // With useCallback - same function reference
  const handleClickMemo = useCallback(() => {
    console.log('Clicked', count);
  }, [count]); // Recreate when count changes
  
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      
      {/* Child re-renders when text changes without memo */}
      <ChildComponent onClick={handleClickMemo} />
      
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
};

// Memoized child component
const ChildComponent = memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click Me</button>;
});

// Complex example combining both
const SearchableList = ({ items }) => {
  const [query, setQuery] = useState('');
  const [sortOrder, setSortOrder] = useState('asc');
  
  // Memoize filtered items
  const filteredItems = useMemo(() => {
    return items.filter(item => 
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [items, query]);
  
  // Memoize sorted items
  const sortedItems = useMemo(() => {
    return [...filteredItems].sort((a, b) => {
      const compare = a.name.localeCompare(b.name);
      return sortOrder === 'asc' ? compare : -compare;
    });
  }, [filteredItems, sortOrder]);
  
  // Memoize callback
  const handleSort = useCallback(() => {
    setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
  }, []);
  
  return (
    <div>
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
      />
      <button onClick={handleSort}>Sort</button>
      <List items={sortedItems} />
    </div>
  );
};

import { useRef, useEffect } from 'react';

// Focus input on mount
const AutoFocusInput = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return <input ref={inputRef} />;
};

// Store timer ID without triggering re-renders
const Timer = () => {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);
  
  const start = () => {
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        setCount(c => c + 1);
      }, 1000);
    }
  };
  
  const stop = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };
  
  useEffect(() => {
    return () => stop(); // Cleanup
  }, []);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
};

// Track previous value
const usePrevious = (value) => {
  const ref = useRef();
  
  useEffect(() => {
    ref.current = value;
  }, [value]);
  
  return ref.current;
};

const Counter = ({ count }) => {
  const prevCount = usePrevious(count);
  
  return (
    <div>
      Current: {count}, Previous: {prevCount}
    </div>
  );
};

// Measure element dimensions
const MeasureElement = () => {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({});
  
  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);
  
  return (
    <div ref={divRef}>
      Size: {dimensions.width} x {dimensions.height}
    </div>
  );
};

// Ref callback for dynamic refs
const DynamicList = ({ items }) => {
  const itemRefs = useRef(new Map());
  
  const scrollToItem = (id) => {
    const node = itemRefs.current.get(id);
    node?.scrollIntoView({ behavior: 'smooth' });
  };
  
  return (
    <ul>
      {items.map(item => (
        <li
          key={item.id}
          ref={(node) => {
            if (node) {
              itemRefs.current.set(item.id, node);
            } else {
              itemRefs.current.delete(item.id);
            }
          }}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
};

import { useState, useTransition } from 'react';

const SearchableList = ({ items }) => {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();
  
  const handleSearch = (value) => {
    // Urgent: Update input immediately
    setQuery(value);
    
    // Non-urgent: Filter in background
    startTransition(() => {
      const filtered = items.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  };
  
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
      />
      
      {isPending ? (
        <div>Updating results...</div>
      ) : (
        <ul>
          {filteredItems.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

// Tab switching example
const TabContainer = () => {
  const [activeTab, setActiveTab] = useState('tab1');
  const [isPending, startTransition] = useTransition();
  
  const switchTab = (tab) => {
    startTransition(() => {
      setActiveTab(tab);
    });
  };
  
  return (
    <div>
      <div className={isPending ? 'loading' : ''}>
        <button onClick={() => switchTab('tab1')}>Tab 1</button>
        <button onClick={() => switchTab('tab2')}>Tab 2</button>
        <button onClick={() => switchTab('tab3')}>Tab 3</button>
      </div>
      
      <TabContent tab={activeTab} />
    </div>
  );
};

import { useState, useDeferredValue, memo } from 'react';

const SearchResults = ({ query }) => {
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;
  
  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      <ExpensiveList query={deferredQuery} />
    </div>
  );
};

// Expensive component that benefits from deferral
const ExpensiveList = memo(({ query }) => {
  const items = useMemo(() => {
    // Expensive filtering/computation
    return largeDataset.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [query]);
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

// Complete search component
const SearchPage = () => {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  const isSearching = query !== deferredQuery;
  
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      
      {isSearching && <span>Searching...</span>}
      
      <SearchResults query={deferredQuery} />
    </div>
  );
};

// Comparison: useTransition vs useDeferredValue
// useTransition: You control the state update
// useDeferredValue: React controls when to update the value

import { useId } from 'react';

// Basic form field with unique ID
const TextField = ({ label, error }) => {
  const id = useId();
  const errorId = id + '-error';
  
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type="text"
        aria-describedby={error ? errorId : undefined}
        aria-invalid={error ? 'true' : 'false'}
      />
      {error && (
        <span id={errorId} role="alert">
          {error}
        </span>
      )}
    </div>
  );
};

// Complex form with multiple fields
const ContactForm = () => {
  const id = useId();
  
  return (
    <form>
      <div>
        <label htmlFor={id + '-name'}>Name</label>
        <input id={id + '-name'} type="text" />
      </div>
      
      <div>
        <label htmlFor={id + '-email'}>Email</label>
        <input id={id + '-email'} type="email" />
      </div>
      
      <div>
        <label htmlFor={id + '-message'}>Message</label>
        <textarea id={id + '-message'} />
      </div>
    </form>
  );
};

// Reusable input component
const Input = ({ label, type = 'text', ...props }) => {
  const id = useId();
  
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} type={type} {...props} />
    </>
  );
};

// ARIA example
const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const id = useId();
  const headerId = id + '-header';
  const panelId = id + '-panel';
  
  return (
    <div>
      <button
        id={headerId}
        aria-expanded={isOpen}
        aria-controls={panelId}
        onClick={() => setIsOpen(!isOpen)}
      >
        {title}
      </button>
      
      <div
        id={panelId}
        role="region"
        aria-labelledby={headerId}
        hidden={!isOpen}
      >
        {children}
      </div>
    </div>
  );
};

import { useSyncExternalStore } from 'react';

// Browser online status
const useOnlineStatus = () => {
  return useSyncExternalStore(
    // Subscribe function
    (callback) => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    // getSnapshot function
    () => navigator.onLine,
    // getServerSnapshot (SSR)
    () => true
  );
};

// Usage
const StatusIndicator = () => {
  const isOnline = useOnlineStatus();
  
  return (
    <div>
      {isOnline ? '🟢 Online' : '🔴 Offline'}
    </div>
  );
};

// Window width hook
const useWindowWidth = () => {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('resize', callback);
      return () => window.removeEventListener('resize', callback);
    },
    () => window.innerWidth,
    () => 0 // SSR default
  );
};

// Custom store example
class CountStore {
  constructor() {
    this.count = 0;
    this.listeners = new Set();
  }
  
  subscribe = (callback) => {
    this.listeners.add(callback);
    return () => this.listeners.delete(callback);
  };
  
  getSnapshot = () => {
    return this.count;
  };
  
  increment = () => {
    this.count++;
    this.listeners.forEach(listener => listener());
  };
}

const store = new CountStore();

const useCountStore = () => {
  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot
  );
};

const Counter = () => {
  const count = useCountStore();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => store.increment()}>+</button>
    </div>
  );
};

// Local storage sync
const useLocalStorage = (key, initialValue) => {
  return useSyncExternalStore(
    (callback) => {
      const handler = (e) => {
        if (e.key === key) callback();
      };
      window.addEventListener('storage', handler);
      return () => window.removeEventListener('storage', handler);
    },
    () => {
      try {
        return JSON.parse(localStorage.getItem(key)) ?? initialValue;
      } catch {
        return initialValue;
      }
    },
    () => initialValue
  );
};

import { useInsertionEffect } from 'react';

// CSS-in-JS library example (simplified)
const styleCache = new Map();

const useStyleInjection = (css, id) => {
  useInsertionEffect(() => {
    // Check if style already injected
    if (styleCache.has(id)) {
      return;
    }
    
    // Create and inject style tag
    const style = document.createElement('style');
    style.textContent = css;
    style.setAttribute('data-style-id', id);
    document.head.appendChild(style);
    
    // Cache it
    styleCache.set(id, style);
    
    // Cleanup
    return () => {
      document.head.removeChild(style);
      styleCache.delete(id);
    };
  }, [css, id]);
};

// Example usage in a CSS-in-JS library
const useStyledComponent = (styles) => {
  const id = useId();
  const className = \`styled-\${id}\`;
  
  const css = \`.styled-\${id} {
    \${Object.entries(styles)
      .map(([key, value]) => \`\${key}: \${value};\`)
      .join('\n')}
  }\`;
  
  useStyleInjection(css, id);
  
  return className;
};

// Usage in components
const MyComponent = () => {
  const className = useStyledComponent({
    'background-color': '#f0f0f0',
    'padding': '20px',
    'border-radius': '8px'
  });
  
  return <div className={className}>Styled Content</div>;
};

// Real-world pattern (styled-components-like)
const styled = (tag) => (styles) => {
  return (props) => {
    const id = useId();
    const className = \`sc-\${id}\`;
    
    useInsertionEffect(() => {
      const css = generateCSS(className, styles, props);
      injectStyle(css, id);
      
      return () => removeStyle(id);
    }, [className, styles, props]);
    
    return React.createElement(tag, {
      ...props,
      className: \`\${className} \${props.className || ''}\`
    });
  };
};

// Usage
const Button = styled('button')\`
  background: blue;
  color: white;
  padding: 10px 20px;
\`;

// In component
<Button>Click Me</Button>

import { useState } from 'react';
import { flushSync } from 'react-dom';

// React 18: Automatic batching everywhere
const AutoBatchingExample = () => {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  console.log('Render'); // Only logs once per click
  
  // Event handlers - batched (React 17 too)
  const handleClick = () => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // Only 1 render
  };
  
  // Timeouts - NOW batched (was 2 renders in React 17)
  const handleTimeout = () => {
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // Only 1 render in React 18!
    }, 1000);
  };
  
  // Promises - NOW batched (was 2 renders in React 17)
  const handleAsync = async () => {
    const data = await fetchData();
    setCount(data.count);
    setFlag(data.flag);
    // Only 1 render in React 18!
  };
  
  // Native event handlers - NOW batched
  useEffect(() => {
    const handler = () => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // Only 1 render in React 18!
    };
    
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  
  // Opt-out of batching with flushSync (rare)
  const handleNoFlush = () => {
    flushSync(() => {
      setCount(c => c + 1);
    });
    // React renders here
    flushSync(() => {
      setFlag(f => !f);
    });
    // React renders again - 2 total renders
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Flag: {flag.toString()}</p>
      <button onClick={handleClick}>Update</button>
      <button onClick={handleTimeout}>Update (Timeout)</button>
      <button onClick={handleAsync}>Update (Async)</button>
    </div>
  );
};

// Concurrent features example
const ConcurrentExample = () => {
  const [resource, setResource] = useState(initialResource);
  
  // Wrap in transition for smooth updates
  const handleUpdate = () => {
    startTransition(() => {
      setResource(fetchNewResource());
    });
  };
  
  return (
    <Suspense fallback={<Spinner />}>
      <button onClick={handleUpdate}>Update</button>
      <ResourceComponent resource={resource} />
    </Suspense>
  );
};

// Strict Mode double render
const StrictModeExample = () => {
  useEffect(() => {
    console.log('Effect');
    // In development, logs twice to help find bugs
    
    return () => {
      console.log('Cleanup');
      // Also runs twice in development
    };
  }, []);
  
  return <div>Component</div>;
};

// useState for simple state
const SimpleCounter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

// Multiple useState for independent values
const UserForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);
  
  // Each state is independent and clear
  return (/* form */);
};

// useState with object for related data
const ProfileEditor = () => {
  const [profile, setProfile] = useState({
    name: '',
    email: '',
    bio: ''
  });
  
  const updateField = (field, value) => {
    setProfile(prev => ({ ...prev, [field]: value }));
  };
  
  return (/* editor */);
};

// useReducer for complex state logic
const ShoppingCart = () => {
  const [state, dispatch] = useReducer(cartReducer, {
    items: [],
    total: 0,
    discount: 0,
    tax: 0
  });
  
  return (
    <div>
      <button onClick={() => dispatch({ 
        type: 'ADD_ITEM', 
        payload: item 
      })}>
        Add to Cart
      </button>
      <button onClick={() => dispatch({ type: 'APPLY_DISCOUNT' })}>
        Apply Discount
      </button>
      <button onClick={() => dispatch({ type: 'CALCULATE_TOTAL' })}>
        Calculate Total
      </button>
    </div>
  );
};

// Decision tree:
// - 1 value, simple updates? → useState
// - Few independent values? → multiple useState
// - Related values updating together? → useState with object
// - Complex logic, state depends on actions? → useReducer
// - State transitions like a state machine? → useReducer

// Before: State in child components (not shared)
const TemperatureInput1 = () => {
  const [temp, setTemp] = useState('');
  return <input value={temp} onChange={(e) => setTemp(e.target.value)} />;
};

// After: Lift state to parent
const TemperatureConverter = () => {
  const [celsius, setCelsius] = useState('');
  
  const fahrenheit = celsius ? (celsius * 9/5 + 32).toFixed(1) : '';
  
  return (
    <div>
      <TemperatureInput
        scale="Celsius"
        temperature={celsius}
        onTemperatureChange={setCelsius}
      />
      <TemperatureInput
        scale="Fahrenheit"
        temperature={fahrenheit}
        onTemperatureChange={(f) => setCelsius(((f - 32) * 5/9).toFixed(1))}
      />
      <p>Boiling: {celsius >= 100 ? 'Yes' : 'No'}</p>
    </div>
  );
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => (
  <div>
    <label>{scale}:</label>
    <input
      value={temperature}
      onChange={(e) => onTemperatureChange(e.target.value)}
    />
  </div>
);

// Composition to avoid prop drilling
const Layout = ({ header, sidebar, content }) => (
  <div>
    <header>{header}</header>
    <div className="main">
      <aside>{sidebar}</aside>
      <main>{content}</main>
    </div>
  </div>
);

// Usage: Pass components with their own state
const App = () => {
  const [user, setUser] = useState(null);
  
  return (
    <Layout
      header={<Header user={user} onLogout={() => setUser(null)} />}
      sidebar={<Sidebar />} {/* No user prop needed */}
      content={<Dashboard user={user} />}
    />
  );
};

// When to lift state:
// ✓ Two+ components need same data
// ✓ Data needs to be synchronized
// ✓ Parent needs to coordinate children
// ✗ Only one component uses it (keep local)
// ✗ Performance issues (consider Context/memo)

// ❌ Bad: State too high in tree
const App = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [tooltipOpen, setTooltipOpen] = useState(false);
  const [accordionIndex, setAccordionIndex] = useState(0);
  
  return (
    <div>
      <Modal open={modalOpen} onClose={() => setModalOpen(false)} />
      <Tooltip open={tooltipOpen} />
      <Accordion activeIndex={accordionIndex} />
    </div>
  );
};

// ✓ Good: State colocated with components
const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      {isOpen && (
        <div className="modal">
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </>
  );
};

// ✓ Good: Component responsibility
const SearchableList = ({ items }) => {
  // Search state belongs here
  const [query, setQuery] = useState('');
  const [sortOrder, setSortOrder] = useState('asc');
  
  const filteredItems = useMemo(() => {
    return items
      .filter(item => item.name.includes(query))
      .sort((a, b) => sortOrder === 'asc' 
        ? a.name.localeCompare(b.name)
        : b.name.localeCompare(a.name)
      );
  }, [items, query, sortOrder]);
  
  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={() => setSortOrder(prev => 
        prev === 'asc' ? 'desc' : 'asc'
      )}>
        Sort
      </button>
      <List items={filteredItems} />
    </div>
  );
};

// ✓ Good: Lift only when necessary
const ProductPage = () => {
  // Shared between multiple components
  const [selectedProduct, setSelectedProduct] = useState(null);
  
  return (
    <div>
      <ProductList onSelect={setSelectedProduct} />
      <ProductDetails product={selectedProduct} />
      <RelatedProducts productId={selectedProduct?.id} />
    </div>
  );
};

// Guidelines:
// 1. Start with local state
// 2. Lift when siblings need to share
// 3. Keep state close to usage
// 4. Each component owns its UI state

// ✓ Good: Derive inline (cheap calculation)
const CartSummary = ({ items }) => {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const itemCount = items.length;
  const tax = total * 0.1;
  
  return (
    <div>
      <p>Items: {itemCount}</p>
      <p>Subtotal: ${total}</p>
      <p>Tax: ${tax}</p>
      <p>Total: ${total + tax}</p>
    </div>
  );
};

// ✓ Good: useMemo for expensive calculations
const DataTable = ({ data, filters }) => {
  const filteredData = useMemo(() => {
    return data
      .filter(row => filters.every(f => f(row)))
      .sort((a, b) => a.name.localeCompare(b.name))
      .map(row => transformRow(row));
  }, [data, filters]);
  
  return <table>{/* render filteredData */}</table>;
};

// ❌ Bad: Syncing props to state
const SearchInput = ({ initialValue }) => {
  // DON'T DO THIS
  const [value, setValue] = useState(initialValue);
  // value won't update when initialValue changes!
  
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// ✓ Good: Controlled component
const SearchInput = ({ value, onChange }) => {
  return <input value={value} onChange={onChange} />;
};

// ✓ Good: Key reset pattern when prop changes
const UserProfile = ({ userId }) => {
  return <ProfileForm key={userId} userId={userId} />;
  // ProfileForm remounts and resets state when userId changes
};

// ❌ Bad: Storing derived state
const FilteredList = ({ items, filter }) => {
  const [filteredItems, setFilteredItems] = useState([]);
  
  // This creates sync issues!
  useEffect(() => {
    setFilteredItems(items.filter(filter));
  }, [items, filter]);
  
  return <List items={filteredItems} />;
};

// ✓ Good: Derive on every render
const FilteredList = ({ items, filter }) => {
  const filteredItems = useMemo(
    () => items.filter(filter),
    [items, filter]
  );
  
  return <List items={filteredItems} />;
};

// Rule: If you can calculate it from props/state, don't store it!