Advanced React Patterns

Why Advanced Patterns?

As React applications grow, advanced patterns help manage complexity, improve reusability, and maintain clean architectures. These patterns leverage React's composability.

Higher-Order Components (HOCs)

HOCs are functions that take a component and return a new component with enhanced functionality:

const withLoading = (Component) => {
    return (props) => {
      const [loading, setLoading] = useState(true);
      // Loading logic...
      return loading ? <Spinner /> : <Component {...props} />;
    };
  };

Render Props

Render props allow components to share code by passing a render function:

class MouseTracker extends React.Component {
    render() {
      return this.props.children(this.state);
    }
  }

  // Usage
  <MouseTracker>
    {mouse => <p>The mouse position is {mouse.x}, {mouse.y}</p>}
  </MouseTracker>

Custom Hooks

Hooks encapsulate stateful logic and can be shared between components:

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

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

    return [storedValue, setValue];
  }

Compound Components

Create components that work together using context:

const TabsContext = createContext();

  const Tabs = ({ children }) => {
    const [activeTab, setActiveTab] = useState(0);
    return <TabsContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabsContext.Provider>;
  };

  const Tab = ({ index, children }) => {
    const { activeTab, setActiveTab } = useContext(TabsContext);
    return <button onClick={() => setActiveTab(index)} className={activeTab === index ? 'active' : ''}>{children}</button>;
  };

Other Patterns

• Controlled Components: Manage form inputs with React state
• Uncontrolled Components: Let the DOM handle form state
• Portals: Render components outside the parent component's DOM hierarchy
• Error Boundaries: Catch JavaScript errors in component trees

Mastering these patterns will significantly improve your ability to build maintainable, scalable React applications.