React Design Patterns

Common patterns for scalable React apps.

Container/Presentational Pattern

```javascript // Container (logic) function UserContainer() { const [users, setUsers] = useState([]);

useEffect(() => { fetchUsers().then(setUsers); }, []);

return <UserList users={users} />; }

// Presentational (UI) function UserList({ users }) { return ( <ul> {users.map(user => <li key={user.id}>{user.name}</li>)} </ul> ); } ```

Provider Pattern

```javascript const ThemeContext = createContext();

export function ThemeProvider({ children }) { const [theme, setTheme] = useState('light');

return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); }

export const useTheme = () => useContext(ThemeContext); ```

Compound Component Pattern

```javascript function Select({ children, value, onChange }) { return ( <select value={value} onChange={onChange}> {children} </select> ); }

Select.Option = function Option({ value, children }) { return <option value={value}>{children}</option>; };

// Usage <Select value={selected} onChange={setSelected}> <Select.Option value="1">Option 1</Select.Option> <Select.Option value="2">Option 2</Select.Option> </Select> ```

State Reducer Pattern

```javascript function useCounter(reducer) { const [count, setCount] = useState(0);

const increment = () => { setCount(current => reducer(current, 'INCREMENT')); };

return { count, increment }; } ```

Remember

- Choose pattern based on needs - Container/Presentational for separation - Provider for global state - Compound for flexible APIs

> Next: Learn clean code practices!