7 Essential React Design Patterns - Practical Interview Guide

React design patterns are essential for building scalable and maintainable applications. In this guide, we will delve into 7 essential React design patterns that every frontend developer should be familiar with.

These patterns are commonly discussed in technical interviews and understanding them will not only help you ace your interviews but also make you a better React developer.

1. Higher-Order Components (HOCs) Pattern

The Higher-Order Components pattern in React is a powerful pattern for code reuse and logic abstraction. It involves a function that takes a component and returns a new component with additional props.

Code Example of a Higher Order Component

Let's create a simple withLogging HOC that logs the component name when it renders:

const withLogging = (WrappedComponent) => {
    return class WithLogging extends React.Component {
        componentDidMount() {
            console.log(`Rendering ${WrappedComponent.name}`);
        }

        render() {
            return WrappedComponent {...this.props} />;
        }
    };
};

// Usage
const MyComponent = () => {
    return div>My Component/div>;
};

const MyComponentWithLogging = withLogging(MyComponent);

Explanation:

• withLogging is a function that takes a component as an argument and returns a new component.
• The returned component (WithLogging) logs the name of the wrapped component when it mounts.
• The original component (MyComponent) is passed as an argument to withLogging to create a new component with logging functionality.

Benefits of Higher Order Components:

1. Code Reusability: HOCs allow you to reuse logic across multiple components without code duplication.
2. Separation of Concerns: HOCs help separate the concerns of different features within a component.
3. Enhanced Composition: HOCs enable composing components with additional capabilities without modifying their original implementation.

2. Render Prop Pattern

The Render Prop pattern in React involves passing a function as a prop to a component to share code and state. This pattern promotes code reusability and component composition.

Code Example: Render Props

Below is an example of how the render prop pattern can be implemented:

function RenderPropComponent({ render }) {
  return render();
}

function App() {
  return (
    div>
      h1>Render Prop Pattern Example/h1>
      RenderPropComponent render={() => strong>Hello, Render Prop!/strong>} />
    /div>
  );
}

ReactDOM.render(App />, document.getElementById('root'));

In the code snippet:

1. RenderPropComponent: This component expects a function render as a prop and simply calls that function to render its content.
2. App: The main component that renders a heading and includes RenderPropComponent with a function passed as render prop to render the content "Hello, Render Prop!".

3. Context Provider Pattern

The context provider pattern is a design pattern used in frontend development to manage and share state across components without having to pass props down manually through each level of the component tree.

By using a context provider, you can define data at a higher level in the component hierarchy and make it accessible to any component that needs it without having to pass it explicitly as props.

Code Example: Context Provider

Let's consider a simple example of a theme switcher where we want to toggle between light and dark themes throughout our application using the context provider pattern.

import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    /ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

In this example, we create a context called ThemeContext and a provider component called ThemeProvider that holds the theme state and a function to toggle the theme. The ThemeProvider component wraps its children with the ThemeContext.Provider component, passing down the theme state and the toggle function as the value.

Code Explanation:

1. createContext: Creates a new context object.
2. useState: Manages the theme state.
3. toggleTheme: Function to toggle between light and dark themes.
4. ThemeProvider: Component that provides the theme state and toggle function to its children.
5. ThemeContext.Provider: Component that makes the theme state and toggle function available to consuming components.

By using the context provider pattern, components at any level of the component tree can access and update the theme state without passing props down manually through each level.

4. ForwardRef Pattern

The ForwardRef pattern in React enables a component to access the ref of its child component. This is useful when you need to manipulate the child component's DOM element.

Code Example: ForwardRef

Let's consider a simple example where a parent component forwards a ref to a child component:

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

    const ChildComponent = forwardRef((props, ref) => {
        const inputRef = useRef(null);

        useImperativeHandle(ref, () => ({
            focus: () => {
                inputRef.current.focus();
            }
        }));

        return input ref={inputRef} />;
    });

    const ParentComponent = () => {
        const childRef = useRef(null);

        const handleClick = () => {
            childRef.current.focus();
        };

        return (
            >
                ChildComponent ref={childRef} />
                button onClick={handleClick}>Focus Input/button>
            />
        );
    };

    export default ParentComponent;

In the above example:

• We create a ChildComponent that receives a ref using forwardRef.
• Inside ChildComponent, we define a local inputRef using useRef to reference the input element.
• We use useImperativeHandle to expose a focus method to the parent component through the forwarded ref.
• In the ParentComponent, we create a ref childRef and pass it to ChildComponent.
• When the button is clicked, it calls focus on childRef, which internally triggers focus on the input element in ChildComponent.

5. Container vs Presentational Components Pattern

The Container vs Presentational Components pattern in React emphasizes the separation of concerns between container components (logic) and presentational components (UI). This pattern promotes code clarity and maintainability.

Container Components

Container components are responsible for the logic and state management of the application. They interact with data sources, handle business logic, and provide data to the presentational components. Container components are not concerned with how the data is displayed, as that is the role of presentational components.

Presentational Components

Presentational components are responsible for how the UI looks. They receive data and callbacks as props and render the UI elements based on that data. Presentational components are reusable and unaware of the data fetching or business logic. They focus on displaying the UI and handling user interactions.

Code Example

Below is an example of a simple React application demonstrating the Container and Presentational Components pattern:

import React, { useState } from 'react';

// Container Component
const CounterContainer = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    Counter count={count} increment={increment} />
  );
};

// Presentational Component
const Counter = ({ count, increment }) => {
  return (
    div>
      p>Count: {count}/p>
      button onClick={increment}>Increment/button>
    /div>
  );
};

// App Component
const App = () => {
  return (
    div>
      h1>Counter App/h1>
      CounterContainer />
    /div>
  );
};

export default App;

Code Explanation

• CounterContainer: This is the container component that manages the state count and the increment function to update the count.
• Counter: This is the presentational component that receives count and increment as props and displays the count with a button to increment it.
• App: This is the main component that renders the title and the CounterContainer.

6. Compound Components & Composite Patterns

The Compound Components & Composite Patterns in React allow you to create components that work together to achieve a common goal. Compound components define a parent component that manages the state and behavior of its children.

Compound Component:

A compound component is a group of components that work together to achieve a common goal. They are designed to be used together and provide a higher level of abstraction compared to individual components.

Composite Pattern:

The composite pattern is a structural design pattern that allows you to compose objects into tree structures to represent part-whole hierarchies. It lets clients treat individual objects and compositions of objects uniformly.

Code Example:

Let's consider a Tab Component which is a compound component where tabs and their content are related:

class Tab extends React.Component {
    render() {
        return (
            div>
                {this.props.children}
            /div>
        );
    }
}

class TabList extends React.Component {
    render() {
        return (
            div>
                {this.props.children}
            /div>
        );
    }
}

class TabPanel extends React.Component {
    render() {
        return (
            div>
                {this.props.children}
            /div>
        );
    }

In this example, Tab, TabList, and TabPanel form a compound component Tab where each part plays a role in creating a tabbed interface.

Code Explanation:

• Tab: Represents the container for the tabs. It renders the content of each tab.
• TabList: Represents the list of tabs within the tab component.
• TabPanel: Represents the content panel associated with each tab.

This compound component structure allows for a clean organization of tab-related components with a clear separation of concerns.

7. Controlled Component Pattern

The Controlled Component pattern in React involves managing form components' state through React component state. This pattern ensures that the form data is always in sync with the component state.

Code Example: Controlled Component

import React, { useState } from 'react';

const ControlledComponentExample = () => {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        div>
            label>Enter Text:/label>
            input 
                type="text" 
                value={inputValue} 
                onChange={handleInputChange} 
            />
            p>Input Value: {inputValue}/p>
        /div>
    );
};

export default ControlledComponentExample;

Code Explanation:

In this example, we have a functional component ControlledComponentExample that maintains the input value in its state using the useState hook. The input value is displayed in the input element and updated via the handleInputChange function on every change event. The component renders the input value below the input field to reflect the current state.

Final Throughts

Understanding these 7 essential React design patterns will not only help you excel in frontend interviews but also make you a more proficient React developer. Practice implementing these patterns in your projects to enhance code quality, maintainability, and scalability.

Further Reading 🚀

1. 100+ Top React JS Interview Questions and Answers
2. 20 Most Asked Custom Hooks In React for Interviews
3. 30 Most Asked React Hooks Interview Questions
4. 8 Must-Know React Hooks Comparisons & Trade-Offs
5. Core React Hooks Cheat Sheet