This repository demonstrates advanced React design patterns including Compound Components, Render Props, and Debouncing, implemented in a simple Vite + React setup.
It’s meant as a learning resource and a reference project for developers who want to understand and apply these patterns in real-world applications.
- Compound Components – Build flexible APIs where the parent manages state and child components consume it.
- Render Props – Share reusable stateful logic while leaving rendering control to the user.
- Debouncing – Optimize performance by reducing unnecessary re-renders or API calls while typing.
react-patterns/
├── src/
│ ├── components/
│ │ ├── Compound/ # Compound Components pattern
│ │ ├── RenderProps/ # Render Props pattern
│ │ └── Debounce/ # Debouncing pattern
│ ├── hooks/ # Custom hooks like useDebounce
│ ├── App.jsx # Main entry component
│ └── main.jsx # ReactDOM entry
├── public/
├── docs/ # Screenshots and GIFs for README
├── package.json
├── vite.config.js
└── README.md
- Node.js (>= 20)
- npm or yarn
git clone https://github.com/AqibNiazi/react-patterns.git
cd react-patterns
npm installnpm run devnpm run buildContributions are welcome! You can add new patterns (like Higher-Order Components, State Reducers, Portals, etc.), improve documentation, or suggest better examples.
Steps:
- Fork the repo
- Create a branch:
git checkout -b feature/my-pattern - Commit your changes
- Push to the branch:
git push origin feature/my-pattern - Open a pull request
MIT License © 2025 Aqib Niazi
If you found this helpful, consider giving the repository a ⭐ on GitHub!