// Software DesignYou're Using React Compound Components Wrongpetarivanov.tech
You're Using React Compound Components Wrong
The most-copied example in every tutorial is the one place you shouldn't use them.
Tagged React
22 articles on React.
Browse by tag
ReactCareer GrowthNode.jsTypeScriptClean CodeComponent DesignDesign PatternsToolingProject StructureAPI DesignCode ReviewCSSGraphQLInterview PrepProductivityTestingAILearningModular MonolithPerformanceRefactoringSOLIDSystem DesignDebuggingDistributed SystemsMicroservicesState ManagementCQRSDatabasesDDDDecision MakingDependency InjectionError HandlingHiring & OnboardingIdempotencyNext.jsProductWeb Platform
- // EngineeringMy Frontend Stack In 2026petarivanov.tech
My Frontend Stack In 2026
The tools I actually reach for when building production apps, from framework to the moment a user hits a bug.
- // ArchitectureScreaming Architecture & Colocation: Let Your Project Structure Tell the Storypetarivanov.tech
Screaming Architecture & Colocation: Let Your Project Structure Tell the Story
Learn why you should organize your code by what your app actually does, not by technical roles.
- // Software DesignUse Compound Components React Advanced Pattern For Better Software Design 🧑🎨petarivanov.tech
Use Compound Components React Advanced Pattern For Better Software Design 🧑🎨
Learn how to create and design better React components using the Compound Components React advanced pattern. (4 minutes)
- // Software DesignWhy Composition Beats Inheritance In Reactpetarivanov.tech
Why Composition Beats Inheritance In React
Learn the benefits of using composition over inheritance in React projects. (3 minutes)
- // Software DesignHow to Better Organize Your React Component Files?petarivanov.tech
How to Better Organize Your React Component Files?
Learn about the layered approach when organizing your React component files. (3 minutes)
- // Software DesignOpen-Closed Principle (OCP) In React: Write Extensible Componentspetarivanov.tech
Open-Closed Principle (OCP) In React: Write Extensible Components
A practical look at applying the Open-Closed Principle to React. (4 minutes)
- // Software DesignHow To Craft Flexible UIs In React by Using Generic And Domain Components? 💪petarivanov.tech
How To Craft Flexible UIs In React by Using Generic And Domain Components? 💪
That's part of my book "The Conscious React" 📚
- // Software DesignLoading Third-Party Scripts In Reactpetarivanov.tech
Loading Third-Party Scripts In React
Learn how to properly load 3rd party scripts in React, improve performance, and avoid nasty bugs. (4 minutes)
- // Software DesignSingle Responsibility Principle (SRP) In React: Write Focused Componentspetarivanov.tech
Single Responsibility Principle (SRP) In React: Write Focused Components
A practical look at applying Single Responsibility Principle into React. (3 minutes)
- // Software DesignBuilding React Components: Turning UI Designs Into React Componentspetarivanov.tech
Building React Components: Turning UI Designs Into React Components
Learn how to design and architect React Components based on User Interface Designs of Components and Pages. (5 minutes)
- // Software Design7 practical tips on performance optimizations in React applicationspetarivanov.tech
7 practical tips on performance optimizations in React applications
Optimizing React apps is about smart choices, not exhaustive tweaks.
- // Software DesignThe styling dilemma in Reactpetarivanov.tech
The styling dilemma in React
Embrace the classless styling approach for better maintainability and readability
- // Software DesignHow to use Reducer in React for better State Management: 2 effective ways for simpler design and architecturepetarivanov.tech
How to use Reducer in React for better State Management: 2 effective ways for simpler design and architecture
Explore the benefits of using the useReducer hook in React for more maintainable and readable components.
- // Engineering2 must-have tools in your React Project for having a consistent codebasepetarivanov.tech
2 must-have tools in your React Project for having a consistent codebase
How automated formatting and linting enhance code quality and collaboration?
- // Engineering9 React Testing Best Practices for Better Design and Quality of Your Testspetarivanov.tech
9 React Testing Best Practices for Better Design and Quality of Your Tests
A Senior Engineer’s Guide to Effective React Testing (includes Cheat Sheet)
- // Software Design10 ways to better organize and design your React Applicationpetarivanov.tech
10 ways to better organize and design your React Application
Learn how to make your React App scale.
- // Software DesignState Management & Data Fetching Libraries in Reactpetarivanov.tech
State Management & Data Fetching Libraries in React
Notes on using and not using state management and data fetching libraries in React.
- // Software DesignReact Component Mental Modelspetarivanov.tech
React Component Mental Models
Understand the different types of components to design better React apps.
- // Software Design15 React Component Principles & Best Practices for Better Software Architecture & Designpetarivanov.tech
15 React Component Principles & Best Practices for Better Software Architecture & Design
The conscious road to more scalable designs of React applications.
- // The T-Shaped DevStep by Step Guide: Migrate a React App from Bootstrap to Tailwind CSSpetarivanov.tech
Step by Step Guide: Migrate a React App from Bootstrap to Tailwind CSS
I will walk you through my journey of migrating a React SPA from Bootstrap to Tailwind CSS. I will discuss the pros and cons of the architectural strategies considered during the migration. Then, I will move to the execution of the picked strategy and share some learned lessons throughout the whole experience.
- // The T-Shaped DevComparison Guide: Bootstrap vs. Tailwind CSS. When and What to choose?petarivanov.tech
Comparison Guide: Bootstrap vs. Tailwind CSS. When and What to choose?
Many software developers do not think a lot before picking either Bootstrap or Tailwind CSS. They go with Bootstrap when Tailwind CSS is more appropriate or vice versa. However, picking the right tool and technology for solving a problem is crucial.