React Design Patterns

Common patterns for scalable React apps.

Container/Presentational Pattern

// 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

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

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

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!