Are you tired of writing the same code over and over again? Want to take your React skills to the next level? Discover the power of HOCs, Render Props, Hooks, and Context API; these five mind-blowing React design patterns will change how you think about coding!

1. Container and Presentational Components 🔥

The first pattern we’ll look at is separating the container and presentational components. This pattern is about separating data management concerns and UI rendering. Container components are responsible for managing the data and state of the application, while presentational components are responsible for rendering the UI.

Here’s an example of a container component:

import { useState } from 'react';

function TodoContainer() {
 const [todos, setTodos] = useState([]);

 function handleAddTodo(todo) {
 setTodos([...todos, todo]);
 }

 return (
 <TodoPresentational
 todos={todos}
 onAddTodo={handleAddTodo}
 />
 );
}

And here’s an example of a presentational component:

function TodoPresentational({ todos, onAddTodo }) {
 return (
 <>
 <ul>
 {todos.map(todo => (
 <li key={todo.id}>{todo.text}</li>
 ))}
 </ul>
 <button onClick={() => onAddTodo({ id: Date.now(), text: 'New Todo' })}>
 Add Todo
 </button>
 </>
 );
}

By separating data management concerns and UI rendering, our code becomes more modular and easier to understand.

2. Higher-Order Components (HOCs) 🚀

A Higher-Order Component (HOC) is a pattern that allows you to reuse component logic. HOCs are a way to share standard functionality among multiple components.

Here’s an example of a HOC that adds a loading state to a component:

import { useState, useEffect } from 'react';

function withLoading(WrappedComponent) {
 return function LoadingComponent({ isLoading, ...props }) {
 const [loading, setLoading] = useState(isLoading);

 useEffect(() => {
 setLoading(isLoading);
 }, [isLoading]);

 if (loading) {
 return <div>Loading...</div>;
 }

 return <WrappedComponent {...props} />;
 };
}