3 very simple React patterns to immediately improve your codebase 🪄

React is powerful.

But with power comes the risk of messy codebases. Over time, components can become bloated, hard to read, and even harder to maintain.

Thankfully, we can apply three very simple patterns can immediately make your codebase cleaner, more modular, and easier to scale - making way for further more advanced adjustments.

1. Composition pattern for flexible components

Overloading components with props to handle every variation makes them rigid and hard to maintain.

Let's say your Button has an icon prop. To support icons on the left and right, you add leftIcon and rightIcon. Then, to add a separator, you introduce hasSeparator. You get the idea - before you know it, your button has 15 props.

The composition pattern solves this by splitting components into smaller, focused subcomponents that consumers can arrange as needed. For example, instead of adding leftIcon or rightIcon props to a Button, you can split it into Button, Button.Icon, and Button.Text for full customization.

function Button({ children }) {
  return <button>{children}</button>;
}

function ButtonIcon({ icon }) {
  return <span>{icon}</span>;
}

function ButtonText({ children }) {
  return <span>{children}</span>;
}

<Button>
  <Button.Icon icon="🚀" />
  <Button.Text>Launch</Button.Text>
</Button>

This approach keeps components clean, reusable, and easy to adapt.

2. Component hooks for separating logic from UI

One of the most effective and surprisingly simple ways to clean up bloated components is by using component hooks.

This pattern involves extracting the logic of a component into a custom hook, allowing the component to focus solely on rendering the UI. By doing so, you decouple the business logic from the presentation layer, making your code easier to read, maintain, and test.

For example, if you have a component that handles input validation, formatting, and other logic-heavy tasks, you can move all of that logic into a dedicated hook.

I wrote a detailed example of how to apply this pattern in a real-world scenario on my blog. Check out the article to see how this approach can dramatically simplify your components while improving scalability.

3. Render props for component customization

When you need to customize a component's behavior or content, the Render Props pattern can come in handy. It allows you to pass a rendering function or ReactNode to a component to customize what it renders, without modifying the component itself.

For example, let’s say you have a MobileNavigation component that needs to render social media icons, but the icons may vary depending on the app:

function MobileNavigation({ socialMediaIcons }) {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
      <div>{socialMediaIcons}</div>
    </nav>
  );
}

// Usage:
<MobileNavigation
  socialMediaIcons={
    <div>
      <a href="https://twitter.com">🐦</a>
      <a href="https://facebook.com">📘</a>
    </div>
  }
/>

This approach keeps the MobileNavigation component reusable while allowing full customization of its social media section. Render Props ensure that you can tailor parts of the component without duplicating code or introducing unnecessary props.

Conclusion

Improving your React codebase doesn't require a complete overhaul - just a few simple patterns can make a huge difference. By *, *, and using render props, you'll write cleaner, more maintainable code that's easier to scale.

Start applying these patterns today and see how they transform your workflow.

Good luck! 🔥