Design patterns for Frontend ( Ft: React )

Common design patterns :

Container/Presentational Pattern
- Concept: Separates functionality from UI.
- Container: Handles data fetching, state, and passes data as props.
- Presentational: Receives props and renders UI.

Example: UserContainer (fetches data) → UserPresentation (displays data).

Pros: Easy to maintain, test, and scale & Modular and reusable components.

Cons: More boilerplate, Overhead for small apps, Prop drilling, Can be challenging to design.

Custom Hook Pattern
- Concept: Presentational component with a custom hook for business logic.
- Example: A countdown and stopwatch using the same hook.

Pros: Keeps DRY (Don't Repeat Yourself), Separation of concerns, Consistency and improved readability

Cons: Learning curve, Harder debugging, Over abstraction, Potential performance concerns

Pseudo Code: Custom Hook for Countdown & Stopwatch

useTimer Hook

    function useTimer(initialTime, isActive) {
        declare a state variable `time` and set it to `initialTime`

        effect hook {
            if `isActive` is false:
                return early, do nothing

            start an interval that decrements/increments `time` every second

            cleanup function: clear the interval when the component unmounts or when `isActive` changes
        }

        return `time`
    }

Countdown Component (Presentational)

    function CountdownComponent() {
        declare a state variable `isActive` and initialize it to false

        call `useTimer` with initialTime set to 60 and isActive

        render:
            display the `time` value (Countdown)
            button to toggle `isActive`
    }

Stopwatch Component (Presentational)

    function StopwatchComponent() {
        declare a state variable `isActive` and initialize it to false

        call `useTimer` with initialTime set to 0 and isActive

        render:
            display the `time` value (Stopwatch)
            button to toggle `isActive`
    }

Higher order components
- Concept: A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional props or behavior. It is typically used for adding cross-cutting concerns (like authentication, logging, etc.) to components.

Example : withAuth wraps components to add authentication.

Pros : Code Reusability, Separation of Concerns, Consistency.

Cons : Learning Curve, Wrapper Hell, Debugging, Props collision.

For more details refer the video :