React has evolved significantly since its inception, and with it, our understanding of effective patterns and practices. Today, I want to discuss some modern React patterns that have transformed how I approach component design.

The Composition Pattern

Instead of creating monolithic components with numerous props, composition allows us to build flexible, reusable components:

// Instead of this
<Modal title="User Profile" showCloseButton={true} size="large">
  <UserForm />
</Modal>

// Use this
<Modal>
  <Modal.Header>
    <Modal.Title>User Profile</Modal.Title>
    <Modal.CloseButton />
  </Modal.Header>
  <Modal.Body>
    <UserForm />
  </Modal.Body>
</Modal>

Custom Hooks for Logic Separation

Custom hooks have revolutionized how we handle stateful logic:

function useUserData(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);

  return { user, loading };
}

The Compound Component Pattern

This pattern is perfect for components that work together:

<Accordion>
  <Accordion.Item>
    <Accordion.Header>Section 1</Accordion.Header>
    <Accordion.Panel>Content 1</Accordion.Panel>
  </Accordion.Item>
</Accordion>

These patterns have made my React code more maintainable, testable, and easier to reason about. The key is choosing the right pattern for the right use case.