Advanced Component Patterns

1. Introduction

In modern UI frameworks, components are the building blocks of applications. Advanced component patterns help developers create reusable, scalable, and maintainable UI components. This lesson explores various advanced patterns and their implementation.

2. Key Concepts

**Component Composition**: Combining simple components into complex components.
**Higher-Order Components (HOCs)**: Functions that take a component and return a new component with added functionality.
**Render Props**: A technique for sharing code between components using a prop that is a function.
**Hooks**: Special functions in React that let you “hook into” React state and lifecycle features from function components.

3. Advanced Patterns

3.1 Component Composition

Component composition allows developers to design complex UIs by combining smaller components. Here's an example:


                const Card = ({ title, children }) => (
                    <div className="card">
                        <h2>{title}</h2>
                        {children}
                    </div>
                );

                const App = () => (
                    <Card title="Hello World">
                        <p>This is a composed card component.</p>
                    </Card>
                );

3.2 Higher-Order Components (HOCs)

HOCs enhance components by wrapping them with additional functionality. For example:


                const withLogging = (WrappedComponent) => {
                    return (props) => {
                        console.log('Rendering', WrappedComponent.name);
                        return <WrappedComponent {...props} />;
                    };
                };

                const MyComponent = () => <div>Hello HOC!</div>;
                const EnhancedComponent = withLogging(MyComponent);

3.3 Render Props

Render props allow a component to share its state with other components:


                const DataProvider = ({ render }) => {
                    const data = "Some data";
                    return render(data);
                };

                const App = () => (
                    <DataProvider render={(data) => <div>{data}</div>}></DataProvider>
                );

3.4 Custom Hooks

Custom hooks encapsulate functionality for reuse:


                const useFetch = (url) => {
                    const [data, setData] = useState(null);
                    useEffect(() => {
                        fetch(url)
                            .then(response => response.json())
                            .then(data => setData(data));
                    }, [url]);
                    return data;
                };

                const App = () => {
                    const data = useFetch('https://api.example.com/data');
                    return <div>{JSON.stringify(data)}</div>;
                };

4. Best Practices

Use prop types for type-checking components.
Keep components small and focused on a single responsibility.
Utilize context for managing global state instead of prop drilling.
Leverage lazy loading for large component trees to improve performance.

5. FAQ

What is a Higher-Order Component?

A Higher-Order Component is a function that takes a component and returns a new component, enhancing its behavior.

What is the advantage of using Render Props?

Render Props provide a flexible way to share stateful logic between components without needing to nest them.

When should I use Custom Hooks?

Custom Hooks are useful when you need to extract and reuse stateful logic across multiple components.

Flowchart of Component Patterns


        graph TD;
            A[Start] --> B{Is component stateful?};
            B -- Yes --> C[Use Hooks];
            B -- No --> D[Use Stateless Component];
            C --> E{Need to share logic?};
            E -- Yes --> F[Use Render Props];
            E -- No --> G[End];
            F --> H[Use HOC];
            H --> G;