Crucial React Design Patterns Every Dev Should Know

Quick Summary: React Design Patterns are core enablers of React library that enable React Developers to create complex React apps in an easily maintainable manner, which are also flexible, deliver better results, and drive better performance. Learn how to leverage design patterns in React to optimize your React.js project. Apart from having an active developer community and unique features, a true testament of a good web app framework is the presence of design patterns for easing the development process for its developers. And React checks all three checkboxes with ease. With over 38.4k forks and 187k stars (at the time of writing) on GitHub, and a community with millions of developers, React comes packed with promising features like Live Reloading, Hot Reloading, Reusable Components, and more. And to leverage this platform to its full extent with ease, developers can leverage . React patterns What is Design Pattern in React? Developers use Design Patterns in React to save development time and reduce coding efforts by applying pre-tested proven solutions to solve common React development problems. are used to simplify large React apps, helping reduce considerable stress from your React development team and let them work on separate components and share logic between them. React Design Patterns Benefits of using Component Design Patterns in React? There are many benefits of using React component design patterns. They, not only speed up React development processes but also makes the code easier to maintain and read. Here are different ways design patterns help React developers in their React projects: 1. Gives structure for collaborative development React is known for its flexible development environment as it doesn’t impose a set of rules or isn’t opinionated, unlike other popular web app frameworks. Though this opens up endless possibilities for React developers to mix and match different development approaches, it can also work as a limitation when multiple React developers collaborate on a project. Design patterns provide the much-needed structure to your React app developers team or the developer’s team that you may have hired from react js development company. It provides standard terminology and solutions to common problems. This way, we can ensure all developers know what method to follow to solve a common problem, avoid conflicts or errors in code, and optimize the entire process. 2. Ensures React.js Development Best Practices are being followed Frameworks only release design Patterns after extensive research and thorough testing. The same is true for React. Hence, design patterns for React not only help ease the development process but also ensure that React developers are following React development best practices. Hence design patterns are a powerful tool at the disposable of React developers enabling them to create unique, robust, and scalable apps. Understanding Cross-Cutting Concerns of React Development Since React is such an open platform with many possible solutions to one problem, React has different components that may share common functionality. This is referred to as cross-cutting concerns. Cross-cutting concerns are used across multiple React app modules. They represent functionalities for secondary requirements such as security, logging, data transfer, and other concerns essential to almost every React component. This is why they are also known as system-wide concerns. Top React Design Patterns 2022 – for Solving Common React Issues There are many design patterns for React, and they all help solve many React development problems and challenges. However, it is impossible to cover each of them, and it can be overwhelming to bifurcate the most efficient ones from the rest. Hence, we worked hard for you and curated a list of Advance you should know and use in 2022. Without further ado, let’s dive right into it: React Design Patterns 1. The HOC (Higher Order Component) Pattern If you are an experienced React developer, chances are you would have realized the need to utilize the same logic in various situations such as: Components that use Third Party Subscription Data Enhance Various Card Views with the same design elements, such as shadow and border App Components that require logged-in user data Situation needing infinite scroll in three different views, all with different data You can solve all these React cross-cutting concerns with HOC! Higher-Order Components is a used for logic between various components without needing to rewrite the code manually. A HOC is considered a pure function as it has zero side effects. popular React design pattern HOC is a JavaScript function that takes a component as an argument and returns another component after injecting or adding additional data and functionality to the returned component. Higher-Order Components’ fundamental concept is based upon React’s nature, which prefers composition over inheritance. Many popular React frameworks use this advanced like connect from Redux. React pattern If you are using React with Redux for your project and you pass your component through connect function, the passed component will get injected with some data from the Redux store, and these values will be passed as Props. You can use the same function ‘connect’ for passing any component to get the same power-up which is access to the Redux store. React HOC Structure import React, { Component } from "react"; const higherOrderComponent = (DecoratedComponent) => { class HOC extends Component { render() { return ; } } return HOC; }; Popular React HOC Integrations to know: 2. The Provider Pattern The Provider pattern is next on the list of advanced used in React. Its purpose is to share global data across various components of the React component tree. React design patterns React’s Provider Pattern comes with a Provider component that holds the global data, which it can pass down the component tree in the app by using its Consumer component/custom Hook. Again, this pattern can be used with other React integrations such as React-Redux and MobX. To understand how React Provider Design Pattern works, we first need to understand React’s Context API. How does Provider Design Pattern in React help avoid Prop Drilling? Prop Drilling is one of the most common React development concerns React developers face. Prop drilling is when the React app data(props) are passed down to two different components until it reaches the component where the prop is required. It becomes a concern when unrelated components share the data through which the props need to be passed down to the actual component that needs the prop. The Provider design pattern Reactjs is a solution to this React concern. It helps developers store the data in a centralized location known as React Context object that uses React Context API and the Redux store. The Context Provider or the Redux Store can pass this data directly to any component that needs it without undergoing props drilling. React-Redux Provider Design Pattern Structure import React from 'react' import ReactDOM from 'react-dom'

import { Provider } from 'react-redux' import store from './store'

import App from './App.'

componentDidMount() { this.fetchUsers(); }

render() { return (); // ... jsx code with presentation component } } If you are going to use the Presentational and Container Component design pattern, we’d suggest for you first start building your app with just the presentational components. Doing so will help you assess if you are passing down too many props to the intermediate components that don’t have any use for these props but still need to forward them to the components below them. When this issue arises, it will as the child component needs access to that data passed as props time, and again, you can introduce container components. Doing so will help you separate the data and the behavior props to the leaf components without putting a lot of stress on the components that have no use in this data in the middle of the tree. 4. React Hooks Design Patterns Hooks got introduced in React 16.8 version, and they have brought a revolution in how developers approach building React components. Using the React Hook API enables React functional components to get access to common React features like context, state, props, lifecycle, and refs. This increases the potential of functional components as they can now perform all tasks that originally were only supported by class components. Is React Hook a better alternative to Presentational and Container Components Design Patterns? Now the purpose React hooks serves is similar to Presentational and Container component design patterns, to enable separation of concerns. However, presentational and container pattern generally creates giant components with a massive logic split across different lifecycle methods. Such components can be difficult to maintain and read. Containers are also classes; hence they cannot be easily composed. Hence when we put functional components on steroids through React hooks, they are able to perform all functions of containers without their limitations. Since they are pure JavaScript functions, functional components in React are easily composable. Using containers also has other class-related problems like auto binding and using function. this Using the container method is generally not optimal because… import React, { Component } from "react"; class Profile extends Component { constructor(props) { super(props); this.state = { loading: false, user: {}, }; } componentDidMount() { this.subscribeToOnlineStatus(this.props.id); this.updateProfile(this.props.id); } componentDidUpdate(prevProps) { // compariation hell. if (prevProps.id !== this.props.id) { this.updateProfile(this.props.id); } } componentWillUnmount() { this.unSubscribeToOnlineStatus(this.props.id); } subscribeToOnlineStatus() { // subscribe logic } unSubscribeToOnlineStatus() { // unscubscribe logic } fetchUser(id) { // fetch users logic here } async updateProfile(id) { this.setState({ loading: true }); // fetch users data await this.fetchUser(id); this.setState({ loading: false }); } render() { // ... some jsx } } export default Profile; You need to make use of to call props, and it only changes the first level of any state object. setState() Inline action methods like adds up many lines of code onHandleChange() You need to repeat related logic across all lifecycle methods And in comparison, using React hooks design pattern: import React, { useState, useEffect } from "react"; function Profile({ id }) { const [loading, setLoading] = useState(false); const [user, setUser] = useState({});

// Similar to componentDidMount and componentDidUpdate: useEffect(() => { updateProfile(id); subscribeToOnlineStatus(id); return () => { unSubscribeToOnlineStatus(id); }; }, [id]);

const subscribeToOnlineStatus = () => { // subscribe logic };

const unSubscribeToOnlineStatus = () => { // unsubscribe logic };

const fetchUser = (id) => { // fetch user logic here };

const updateProfile = async (id) => { setLoading(true); // fetch user data await fetchUser(id); setLoading(false); };

return; // ... jsx logic } export default Profile; Provides direct access to state Allows functional components to use state replaces lifecycle methods like and , helping developers write and maintain cleaner and concise code. useEffect componentDidMount componentWillInmount Although popularly, React hooks seem like they have replaced container components; if your app is relatively smaller or medium-sized, or if you don’t want to adapt to React hooks, you can still make use of container component design pattern for your React app. 5. Compound Component Pattern One of the common is React compound component pattern that helps establish seamless communication between a parent and children’s components via a flexible and expressive API. React patterns Using this , the parent component can interact and share state with the children components implicitly. It provides an effective method for various components to share states and handle logic. Compound components are best suitable for React apps where you need to build declarative UI. React design pattern What is a compound component? The compound component in React is a pattern that encloses the state and behavior of a group of components while giving the rendering controls of its variables to the external user. For instance, if we consider and tags in HTML to create a drop-down menu: USA UK INDIA ; Here, the tag is being used with the tag for creating a drop-down menu for selecting items from a list in HTML. If we observe, here, the tag is handling the state of the UI, and the tags are set as per how the element should work. Next, we should look at an example where we build a custom React select component with a list of options where the user can select one option at a time – Basic React List Code Example const Option = ({ children, onClick, active }) => { return ( {children}

); };

const Select = ({ options }) => { const [selectedOption, setSelectedOption] = useState(null);

return options.map(({ key, value }) => ( setSelectedOption(value)} > {key} )); };

const App = () => ( ); There are a few issues that need to be addressed here – In this code example, select and option are two independent components. This means that we can make use of the options component without the select component, which is not what we want, as options should be a part of the select menu. Another issue with this approach is Prop Drilling. As you can see, we are passing props through many levels here. The App component here has no need to know about the options. Only the Select component should handle the Option state and behavior. React compound component best practices Now that we know the issues with this method, we need to ensure: Options are only used in the scope of a Select menu State and behavior are being directly managed by Select component Should have provisions for static options Solving this issue with React Context API + Compound Component Design Pattern import React, { useState, useContext } from "react";

const SelectContext = React.createContext();

const Select = ({ children }) => { const [activeOption, setActiveOption] = useState(null);

return ( {children} ); };

const Option = ({ key, children }) => { const { activeOption, setActiveOption } = useContext(DropDownContext);

if (!activeOption || !setActiveOption) { throw new Error( "Context is undefined. Option should be used within the scope of a Select component!!" ); return ( Option should be used within the scope of a Select component!!

); }

return ( setActiveOption(key)} > {children}

); };

Select.Option = Option;

export default function App() { return ( Oliver Eve ); } You will notice the code differences here compared to our previous code example. For instance, now the select component has become a compound component. There are multiple components that are sharing state and behavior under it. We coupled the Option component with Select by using Select.Option = Option. Now we only need to import the Select component, and the Options component would import with it automatically. Now, since we coupled the Option component inside Select, if we render it outside the Select option, it will show an error since the context is not defined for that case. We can also add a line break now without having to pass a prop. Only use Compound Components when: The child components are required to be inside the scope of a parent component, and they need to share behavior and state. You need to render a user interface based on static data that is provided beforehand. 6. React Conditional Rendering Design Pattern For any React app, there are many instances where developers need to render elements based on certain conditions for creating React screens. This can be used at various instances of your React app based on your needs. A practical example of React conditional rendering will be if we need to integrate an authentication option in our React app. React Design pattern For instance, if we are providing an authentication option, we need to make a ‘log out’ button that remains visible when the user is Logged In to the app and a Login/SignUp button for when the user is signed out or is visiting the app for the first time. This process of rendering UI elements for specific conditions or executing logic is known as a conditional rendering design pattern in React. Conditional Rendering in React using If One of the most basic conditional rendering logic used in React is using an statement. This type of conditional rendering is used when we want to render some element only when one specific condition is passed. if For instance, you have something that you don’t want to render in your React component as it doesn’t have the required props ready. A perfect example of this will be a React component list, which shouldn’t render the HTML elements in view if the list of items is missing or absent in the first place. We can set this conditional rendering using a simple JavaScript statement for returning the app to the previous state. const users = [ { id: "1", firstName: "Robin", lastName: "Wieruch" }, { id: "2", firstName: "Dennis", lastName: "Wieruch" }, ];

function App() { return ( Hello Conditional Rendering ); }

function List({ list }) { if (!list) { return null; }

return ( {list.map((item) => ( ))} ); }

We can use short-circuit && operator { isShow && SmallComponent ; } For the ternary operator, when there is no value assigned to the ‘else’ condition, you need to write the ‘: null’ expression to avoid an error. When using short-circuit && operator, we don’t need to write a null expression. Note: You cannot replace if/else or if-else if-else statement with short circuit && operator. React Design Pattern Short-Circuit & Best Practices Used for simple conditional rendering, no code needs to be executed in the ‘else’ block Conditional Rendering in React using Switch Case React also has a switch/case statement, another conditional operator often used as an alternative to if/else statements. However, the use case for this is a little different. For instance, if you are working on a blogging app and you need to display different layouts for different user roles: function App(props) { const { role } = props; if (role === "author") { return Let’s write something ; } if (role === "admin") { return Here are the latest reports ; } if (role === "moderator") { return These are the ongoing events ; } return Your current feed ; } The above code can be refactored using switch/case statement like: function App(props) { const { role } = props; switch (role) { case "author": return Let’s write something ; case "admin": return Here are the latest reports ; case "moderator": return These are the ongoing events ; default: return Your current feed ; } } If we compare the two codes here, you can see in the JavaScript function you need to repeatedly use the break statement, whereas React component has the return statement to stop the switch operation. However, if you wish to use switch without return, you will need to use a break statement after each component line to prevent the code from failing. This would look like this: function App(props) { const { role } = props; switch (role) { case "author": return Let’s write something ; case "admin": return Here are the latest reports ; case "moderator": return These are the ongoing events ; default: return Your current feed ; } } You can use either ; hence you can use whichever suits your case. React design pattern React Design Pattern Switch/Case Best Practices It can be used anywhere in React app for handling multiple conditional renderings with only one variable to evaluate the condition. Wrapping up! These are some of the most common and advanced React component patterns that give developers access to utilize React in all its strength and glory for creating scalable, robust, and secure React apps. Make sure to understand these in detail to ensure you follow the best practices and apply the right pattern at the right place to optimize your React project. React patterns This article was written by Saurabh Barot and has been reposted with permission. Also published . here