Building Scalable React Applications with Modern Patterns

React has evolved significantly since its inception, and with it, the patterns we use to build applications. In this post, we'll explore some of the most powerful patterns for creating maintainable, scalable React applications.

Why Patterns Matter

When building large-scale applications, having consistent patterns helps teams:

• Maintain code quality across the codebase
• Onboard new developers faster
• Reduce cognitive load when working on different parts of the app
• Enable code reuse through well-defined abstractions

Compound Components Pattern

Compound components are a pattern where components work together to form a cohesive API. This pattern gives you more flexibility in how you compose your UI.

function Tabs({ children, defaultTab }) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
}

// Usage
<Tabs defaultTab="overview">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="features">Features</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Overview content...</Tabs.Panel>
  <Tabs.Panel value="features">Features content...</Tabs.Panel>
</Tabs>;

Custom Hooks for Logic Reuse

Custom hooks allow you to extract component logic into reusable functions. This is one of the most powerful patterns in React.

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}

Render Props Pattern

While less common with hooks available, render props are still useful in certain situations:

function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return render({ data, loading });
}

Video: React Patterns in Action

Here's a great video that dives deeper into these patterns:

Conclusion

Modern React development is about choosing the right pattern for the right situation. By understanding compound components, custom hooks, and render props, you'll have a solid toolkit for building scalable applications.

The key is to stay flexible and choose patterns based on your specific needs rather than following trends blindly.