A collection of common React design patterns for writing scalable and maintainable applications.

A collection of React design patterns to improve reusability, maintainability, and performance in modern React applications.

• Higher-Order Components (HOC)
• Render Props Pattern
• Compound Components
• Context API
• Fully typed with TypeScript
• Dark/Light theme toggle using Context API

advanced-react-patterns/ │── src/ │ ├── patterns/ │ │ ├── HigherOrderComponent/ │ │ │ ├── withLogger.tsx │ │ │ ├── Example.tsx │ │ ├── RenderProps/ │ │ │ ├── MouseTracker.tsx │ │ │ ├── Example.tsx │ │ ├── CompoundComponents/ │ │ │ ├── Tabs.tsx │ │ │ ├── Example.tsx │ │ ├── ContextAPI/ │ │ │ ├── ThemeProvider.tsx │ │ │ ├── useTheme.ts │ │ │ ├── Example.tsx │ ├── App.tsx │ ├── index.tsx │── README.md │── package.json │── tsconfig.json │── .gitignore │── LICENSE 

Ensure you have the following installed:

• Node.js (LTS recommended)
• npm (or npx)
• Git (for version control)

Clone the repo and install dependencies:

git clone https://github.com/root2ja/advanced-react-patterns.git cd advanced-react-patterns npm install

Start the development server:

npm start

Then open http://localhost:3000 in your browser.

🎭 Higher-Order Components

const EnhancedComponent = withLogger(MyComponent);

🖱️ Render Props

 <MouseTracker render={(position) => <p>Mouse is at {position.x}, {position.y}</p>} />

🧩 Compound Components

<Tabs> <Tabs.Tab label="Tab 1">Content for Tab 1</Tabs.Tab> <Tabs.Tab label="Tab 2">Content for Tab 2</Tabs.Tab> </Tabs>

🎨 Context API for Theme Toggle

const { theme, setTheme } = useTheme(); <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Toggle Theme</button>

1️⃣ Contribution Guidelines Fork the repository. Create a new feature branch:

git checkout -b feature-branch-name

Make your changes and commit them:

git commit -m "Added new feature"

Push to your fork and create a pull request. 2️⃣ Development Setup To enable hot reloading and debugging:

npm run dev

This project is licensed under the MIT License – see the LICENSE file for details.

⭐ If you found this project useful, give it a star on GitHub! 💬 Feel free to open an issue if you have ideas or suggestions.

• 💼 LinkedIn
• 🐙 GitHub