Things I Learned About React Reusable Components

How to pass unhandled props to child components in React?

Pass the unhandled props to the rendered element using spread syntax:

const Button = ({ label, ...props }) => <button {...props}>{label}</button>;

This allows extending the reusable component with additional props.

References:

• Reusable React Components

What are some ways to compose reusable React components?

• Elements as props: Pass components in as props to be rendered

• Higher order components (HOC): Wrap a component in a HOC to extend it

• Render props: Use a prop whose value is a render function

References:

• Reusable React Components

How to handle data fetching in reusable React components?

Split component into a container for data fetching and a presentational component.

The container fetches data and passes it to presentational component as props.

References:

• Container Components