React Component Patterns

1// Compound Components - Flexible component composition
2import React, { createContext, useContext, useState, ReactNode } from 'react';
3
4// Context for sharing state between compound components
5interface AccordionContextType {
6  openItems: Set<string>;
7  toggleItem: (id: string) => void;
8  allowMultiple: boolean;
9}
10
11const AccordionContext = createContext<AccordionContextType | undefined>(undefined);
12
13// Custom hook to access accordion context
14const useAccordionContext = () => {
15  const context = useContext(AccordionContext);
16  if (!context) {
17    throw new Error('Accordion components must be used within an Accordion provider');
18  }
19  return context;
20};
21
22// Main Accordion component
23interface AccordionProps {
24  children: ReactNode;
25  allowMultiple?: boolean;
26  defaultOpen?: string[];
27}
28
29export const Accordion = ({ 
30  children, 
31  allowMultiple = false,
32  defaultOpen = []
33}: AccordionProps) => {
34  const [openItems, setOpenItems] = useState<Set<string>>(
35    new Set(defaultOpen)
36  );
37
38  const toggleItem = (id: string) => {
39    setOpenItems(prev => {
40      const newSet = new Set(prev);
41      
42      if (newSet.has(id)) {
43        newSet.delete(id);
44      } else {
45        if (!allowMultiple) {
46          newSet.clear();
47        }
48        newSet.add(id);
49      }
50      
51      return newSet;
52    });
53  };
54
55  return (
56    <AccordionContext.Provider value={{ openItems, toggleItem, allowMultiple }}>
57      <div className="accordion">
58        {children}
59      </div>
60    </AccordionContext.Provider>
61  );
62};
63
64// Accordion Item component
65interface AccordionItemProps {
66  children: ReactNode;
67  id: string;
68}
69
70Accordion.Item = ({ children, id }: AccordionItemProps) => {
71  const { openItems } = useAccordionContext();
72  const isOpen = openItems.has(id);
73
74  return (
75    <div className="accordion-item" data-open={isOpen}>
76      {React.Children.map(children, child => {
77        if (React.isValidElement(child)) {
78          return React.cloneElement(child, { id, isOpen } as any);
79        }
80        return child;
81      })}
82    </div>
83  );
84};
85
86// Accordion Header component
87interface AccordionHeaderProps {
88  children: ReactNode;
89  id?: string;
90  isOpen?: boolean;
91}
92
93Accordion.Header = ({ children, id, isOpen }: AccordionHeaderProps) => {
94  const { toggleItem } = useAccordionContext();
95
96  return (
97    <button
98      className="accordion-header"
99      onClick={() => id && toggleItem(id)}
100      aria-expanded={isOpen}
101    >
102      {children}
103      <span className="accordion-icon">{isOpen ? '−' : '+'}</span>
104    </button>
105  );
106};
107
108// Accordion Panel component
109interface AccordionPanelProps {
110  children: ReactNode;
111  isOpen?: boolean;
112}
113
114Accordion.Panel = ({ children, isOpen }: AccordionPanelProps) => {
115  if (!isOpen) return null;
116
117  return (
118    <div className="accordion-panel">
119      {children}
120    </div>
121  );
122};
123
124// Usage example
125const FAQSection = () => {
126  return (
127    <Accordion allowMultiple defaultOpen={['q1']}>
128      <Accordion.Item id="q1">
129        <Accordion.Header>What is React?</Accordion.Header>
130        <Accordion.Panel>
131          React is a JavaScript library for building user interfaces.
132        </Accordion.Panel>
133      </Accordion.Item>
134      
135      <Accordion.Item id="q2">
136        <Accordion.Header>Why use compound components?</Accordion.Header>
137        <Accordion.Panel>
138          Compound components provide flexibility while maintaining a clean API.
139        </Accordion.Panel>
140      </Accordion.Item>
141      
142      <Accordion.Item id="q3">
143        <Accordion.Header>How do they work?</Accordion.Header>
144        <Accordion.Panel>
145          They share state through React Context and work together seamlessly.
146        </Accordion.Panel>
147      </Accordion.Item>
148    </Accordion>
149  );
150};

1// Render Props - Share logic between components
2import React, { useState, useEffect, ReactNode } from 'react';
3
4// Mouse position tracker using render props
5interface MousePosition {
6  x: number;
7  y: number;
8}
9
10interface MouseTrackerProps {
11  children: (position: MousePosition) => ReactNode;
12  // Alternative: use 'render' prop
13  // render: (position: MousePosition) => ReactNode;
14}
15
16const MouseTracker: React.FC<MouseTrackerProps> = ({ children }) => {
17  const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });
18
19  useEffect(() => {
20    const handleMouseMove = (event: MouseEvent) => {
21      setPosition({
22        x: event.clientX,
23        y: event.clientY
24      });
25    };
26
27    window.addEventListener('mousemove', handleMouseMove);
28
29    return () => {
30      window.removeEventListener('mousemove', handleMouseMove);
31    };
32  }, []);
33
34  // Call children function with current position
35  return <>{children(position)}</>;
36};
37
38// Usage examples
39const MouseApp = () => {
40  return (
41    <div className="mouse-demo">
42      {/* Example 1: Tooltip that follows mouse */}
43      <MouseTracker>
44        {({ x, y }) => (
45          <div
46            className="tooltip"
47            style={{
48              position: 'fixed',
49              left: x + 10,
50              top: y + 10,
51              background: 'rgba(0,0,0,0.8)',
52              color: 'white',
53              padding: '4px 8px',
54              borderRadius: '4px',
55              pointerEvents: 'none'
56            }}
57          >
58            Position: {x}, {y}
59          </div>
60        )}
61      </MouseTracker>
62
63      {/* Example 2: Custom cursor */}
64      <MouseTracker>
65        {({ x, y }) => (
66          <div
67            className="custom-cursor"
68            style={{
69              position: 'fixed',
70              left: x - 10,
71              top: y - 10,
72              width: 20,
73              height: 20,
74              borderRadius: '50%',
75              border: '2px solid purple',
76              pointerEvents: 'none',
77              transform: 'translate(-50%, -50%)'
78            }}
79          />
80        )}
81      </MouseTracker>
82    </div>
83  );
84};
85
86// Data fetcher with render props
87interface FetchState<T> {
88  data: T | null;
89  loading: boolean;
90  error: Error | null;
91  refetch: () => void;
92}
93
94interface DataFetcherProps<T> {
95  url: string;
96  children: (state: FetchState<T>) => ReactNode;
97  // Optional transform function
98  transform?: (data: any) => T;
99}
100
101function DataFetcher<T = any>({ 
102  url, 
103  children,
104  transform = (data) => data
105}: DataFetcherProps<T>) {
106  const [state, setState] = useState<FetchState<T>>({
107    data: null,
108    loading: true,
109    error: null,
110    refetch: () => {}
111  });
112
113  const fetchData = async () => {
114    setState(prev => ({ ...prev, loading: true, error: null }));
115    
116    try {
117      const response = await fetch(url);
118      if (!response.ok) throw new Error('Failed to fetch');
119      
120      const rawData = await response.json();
121      const transformedData = transform(rawData);
122      
123      setState({
124        data: transformedData,
125        loading: false,
126        error: null,
127        refetch: fetchData
128      });
129    } catch (error) {
130      setState({
131        data: null,
132        loading: false,
133        error: error as Error,
134        refetch: fetchData
135      });
136    }
137  };
138
139  useEffect(() => {
140    fetchData();
141  }, [url]);
142
143  return <>{children(state)}</>;
144}
145
146// Usage with data fetcher
147const UserProfile = ({ userId }: { userId: string }) => {
148  return (
149    <DataFetcher<User> 
150      url={`/api/users/${userId}`}
151      transform={(data) => ({
152        ...data,
153        fullName: `${data.firstName} ${data.lastName}`
154      })}
155    >
156      {({ data, loading, error, refetch }) => {
157        if (loading) return <div>Loading user...</div>;
158        if (error) return (
159          <div>
160            Error: {error.message}
161            <button onClick={refetch}>Retry</button>
162          </div>
163        );
164        if (!data) return <div>No user found</div>;
165
166        return (
167          <div className="user-profile">
168            <h2>{data.fullName}</h2>
169            <p>{data.email}</p>
170            <button onClick={refetch}>Refresh</button>
171          </div>
172        );
173      }}
174    </DataFetcher>
175  );
176};

1// Higher-Order Components - Component enhancement
2import React, { ComponentType, useEffect, useState } from 'react';
3
4// Basic HOC - Add loading state
5interface WithLoadingProps {
6  loading: boolean;
7}
8
9function withLoading<P extends object>(
10  Component: ComponentType<P>,
11  LoadingComponent?: ComponentType
12): ComponentType<P & WithLoadingProps> {
13  const Loading = LoadingComponent || (() => <div>Loading...</div>);
14
15  return (props: P & WithLoadingProps) => {
16    if (props.loading) {
17      return <Loading />;
18    }
19
20    return <Component {...props} />;
21  };
22}
23
24// Usage
25const UserProfile = ({ user }: { user: User }) => (
26  <div>
27    <h2>{user.name}</h2>
28    <p>{user.email}</p>
29  </div>
30);
31
32const UserProfileWithLoading = withLoading(UserProfile);
33
34// Advanced HOC - Authentication
35interface WithAuthProps {
36  isAuthenticated: boolean;
37  user: User | null;
38}
39
40function withAuth<P extends object>(
41  Component: ComponentType<P>,
42  fallback?: ComponentType
43): ComponentType<Omit<P, keyof WithAuthProps>> {
44  const LoginPrompt = fallback || (() => (
45    <div>Please log in to view this content.</div>
46  ));
47
48  return (props: Omit<P, keyof WithAuthProps>) => {
49    const [authState, setAuthState] = useState<WithAuthProps>({
50      isAuthenticated: false,
51      user: null
52    });
53    const [loading, setLoading] = useState(true);
54
55    useEffect(() => {
56      // Check authentication status
57      checkAuth().then(({ isAuthenticated, user }) => {
58        setAuthState({ isAuthenticated, user });
59        setLoading(false);
60      });
61    }, []);
62
63    if (loading) {
64      return <div>Checking authentication...</div>;
65    }
66
67    if (!authState.isAuthenticated) {
68      return <LoginPrompt />;
69    }
70
71    // Pass auth props to component
72    const enhancedProps = {
73      ...props,
74      ...authState
75    } as P;
76
77    return <Component {...enhancedProps} />;
78  };
79}
80
81// HOC with configuration
82interface LoggerConfig {
83  logProps?: boolean;
84  logRenders?: boolean;
85  logMounts?: boolean;
86  prefix?: string;
87}
88
89function withLogger<P extends object>(
90  Component: ComponentType<P>,
91  config: LoggerConfig = {}
92): ComponentType<P> {
93  const {
94    logProps = true,
95    logRenders = true,
96    logMounts = true,
97    prefix = Component.displayName || Component.name || 'Component'
98  } = config;
99
100  const EnhancedComponent = (props: P) => {
101    useEffect(() => {
102      if (logMounts) {
103        console.log(`[${prefix}] Mounted`);
104      }
105
106      return () => {
107        if (logMounts) {
108          console.log(`[${prefix}] Unmounted`);
109        }
110      };
111    }, []);
112
113    useEffect(() => {
114      if (logRenders) {
115        console.log(`[${prefix}] Rendered`);
116      }
117
118      if (logProps) {
119        console.log(`[${prefix}] Props:`, props);
120      }
121    });
122
123    return <Component {...props} />;
124  };
125
126  // Preserve component name for DevTools
127  EnhancedComponent.displayName = `withLogger(${prefix})`;
128
129  return EnhancedComponent;
130}
131
132// Composing multiple HOCs
133function compose<P>(...hocs: Array<(component: ComponentType<any>) => ComponentType<any>>) {
134  return (Component: ComponentType<P>) =>
135    hocs.reduceRight((acc, hoc) => hoc(acc), Component);
136}
137
138// Usage with composition
139const enhance = compose(
140  withAuth,
141  withLogger,
142  withLoading
143);
144
145const EnhancedDashboard = enhance(Dashboard);