5. Controlled vs. Uncontrolled Components

In React, forms can be built using both controlled and uncontrolled components. Controlled components rely on state to manage their data, while uncontrolled components manage their own state.

Controlled Component Example

function ControlledInput() {
    const [value, setValue] = React.useState('');

    return (
        <input
            type="text"
            value={value}
            onChange={e => setValue(e.target.value)}
        />
    );
}

Uncontrolled Component Example

function UncontrolledInput() {
    const inputRef = React.useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        alert('A name was submitted: ' + inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

Controlled components are more predictable due to their reliance on state managed by React. Uncontrolled components, on the other hand, are easier to set up, as they do not require state management.

6. Higher Order Components (HOCs)

Higher Order Components are functions that take a component and return a new component. HOCs are used to reuse component logic across different components.

Example of HOC

function withLogging(Component) {
    return function WrappedComponent(props) {
        console.log('Rendering:', props);
        return <Component {...props} />;
    };
}

const EnhancedComponent = withLogging(MyComponent);

In this example, the `withLogging` HOC adds logging functionality to `MyComponent`, enhancing its behavior without modifying its implementation.

7. Render Props

Render Props is a technique where a component accepts a function as a prop, which returns a React element. It allows for shared logic between components while maintaining flexibility.

Example of Render Props

function DataFetcher({ render }) {
    const [data, setData] = React.useState(null);
    
    React.useEffect(() => {
        fetch('/api/data')
            .then(response => response.json())
            .then(setData);
    }, []);
    
    return render(data);
}

function App() {
    return (
        <DataFetcher render={data => data ? <Display data={data} /> : <span>Loading...</span>}></DataFetcher>
    );
}

The `DataFetcher` component manages the fetching of data and delegates the rendering logic to the function provided via the `render` prop.

8. Compound Components

Compound components are a pattern where multiple components work together to create a component with shared state. This pattern allows for a clean API and a more intuitive component structure.

Example of Compound Components

function Accordion({ children }) {
    const [openIndex, setOpenIndex] = React.useState(null);

    const toggleAccordion = index => {
        setOpenIndex(openIndex === index ? null : index);
    };

    return React.Children.map(children, (child, index) => 
        React.cloneElement(child, {
            isOpen: index === openIndex,
            toggle: () => toggleAccordion(index),
        })
    );
}

function AccordionItem({ isOpen, toggle, children }) {
    return (
        <div>
            <button onClick={toggle}>Toggle</button>
            {isOpen && <div>{children}</div>}
        </div>
    );
}

In this example, the `Accordion` component manages the state, while `AccordionItem` represents individual items within it. This allows for a cohesive structure.

9. Encapsulation and Composition

Encapsulation and composition are crucial principles in React development, allowing developers to construct complex UIs from smaller, reusable components. This approach enhances maintainability and code readability.

Example of Encapsulation and Composition

function Card({ title, content, footer }) {
    return (
        <div className="card">
            <h2>{title}</h2>
            <p>{content}</p>
            <div className="footer">{footer}</div>
        </div>
    );
}

function App() {
    return (
        <Card
            title="Card Title"
            content="This is an example of a card component."
            footer=<button>Click Me!</button>
        />
    );
}

The `Card` component encapsulates presentation logic, while its content can be composed dynamically, offering flexibility.

10. Conclusion

Understanding various rendering patterns in React is essential for building responsive and maintainable applications. By mastering these patterns—conditional rendering, lists and keys, controlled vs. uncontrolled components, HOCs, render props, compound components, and composition—you will enhance your ability to develop complex UIs effectively.

As you gain experience with these patterns, continuously experiment and refine your strategies for component design. Remember, React is powerful because it encourages creativity and reusable components. Happy coding!