React Component Patterns

Anti-Patterns

• No Classes: Use hooks.
• No Prop Drilling: Use Context/Zustand.
• No Nested Definitions: Define components at top level.
• No Index Keys: Use stable IDs.
• No Inline Handlers: Define before return.

Code

// Composition
export function Layout({ children, aside }: LayoutProps) {
  return (
    <div className='grid'>
      <aside>{aside}</aside>
      <main>{children}</main>
    </div>
  );
}

// Compound Component
export function Select({ children }: { children: ReactNode }) {
  return <select>{children}</select>;
}
Select.Option = ({ val, children }) => <option value={val}>{children}</option>;

Reference & Examples

For advanced patterns (HOCs, Render Props, Compound Components): See references/REFERENCE.md.

Related Topics

hooks | state-management | performance