Mastering reusable frontend in React
In today’s evolving web development landscape, creating reusable components in React isn’t just a best practice—it’s essential for scalable and efficient frontend systems. This blog explores how React’s component-based architecture and System Design principles facilitate reusability.
My journey with web development started when I learned about ISAPI-based web applications and JavaScript as a user interface language before moving to ASP.NET while working for Fidelity Investments as a principal software engineer in 2000.
Much has changed since then, particularly in JavaScript, which has proven remarkably resilient. And from JavaScript frameworks, arguably React remains the most important frontend framework, surpassing even Angular’s earlier dominance.
While System Design prioritizes backend and infrastructure, effective web application development using these frameworks needs several crucial object-oriented and component-oriented software features to build better, more powerful, and efficient applications.
Why React, why now?#
Because of React’s leading role in web development, reusability has evolved from a recommendation to a core concept. React’s component-based structure lets developers reuse code easily in various projects. This speeds up development and improves maintainability, fostering collaboration through shared libraries and design systems. With the “build once, use everywhere” philosophy, teams can build consistent, high-quality user experiences, increase efficiency, and drive innovation.
Frontend reusability and System Design#
Let’s start by understanding exactly why code reusability is important.
Unlock the power of code reuse#
Code reusability is a game-changer in the world of software development, offering numerous benefits that can transform the way you work. By writing code that can be used again and again with minimal changes, we can:
Boost efficiency and save time: Reduce the time spent on repetitive tasks and focus on more complex challenges.
Streamline our codebase: Minimize the amount of code we need to write and maintain, making it easier to handle, debug, and upkeep.
Enhance maintainability: Make our code more robust and easier to manage, with simplified debugging and updates.
The benefits of reusable code#
Reusable code offers a range of advantages, including:
Reduced codebase size: By merging functionality and encapsulating similar code into modular pieces, we can reduce the amount of data transmitted over the network.
Improved scalability: Ensure consistency and a standardized approach to design and behavior as our application grows.
Consistency: Create a cohesive user experience with a library of reusable components, making it easier to add new features or scale our app.
Best practices for reusable code#
To get the most out of code reusability, we can choose to follow a few best practices:
Follow the Single Responsibility Principle (SRP): Ensure that each module or class only needs to be changed for one specific reason.
Use isolated components: Simplify debugging and updates by using modular, self-contained components.
Develop a library of reusable components: Create a standardized approach to design and behavior, making it easier to add new features or scale your app.
Now that we have covered the benefits of code reuse, let’s examine how System Design and reusability are directly connected concepts.
Reusability in System Design#
System Design inherently involves two key types of reusability at two different layers of abstraction given as follows:
Design reuse#
The easiest type of reuse in System Design is at the design level. Examples include load balancers, key-value stores, and content delivery networks. This also includes System Design patterns in React that involve multiple interconnected components.
Code reuse#
The other type of reuse is at a lower level than design reuse. It can involve either object-oriented or component-oriented reuse. Object-oriented reuse is common inside the same codebase, whereas component-oriented reuse involves reuse across language and binary boundaries.
API-level reuse#
Multiple clients can easily access common functionality using standard web protocols by moving reusable code to APIs.
Reusable and custom components#
React's modular approach to components means they are the building blocks of modern web applications, allowing developers to create self-contained pieces of UI that can be effortlessly shared and reused across different projects. This modular approach not only streamlines development but also encourages creativity, as developers can craft custom components tailored to their specific needs, enhancing both functionality and aesthetics. By leveraging the power of reusable and custom components, teams can build dynamic, cohesive user experiences that are both efficient and visually stunning, all while reducing redundancy and boosting collaboration.
System Design and the frontend#
System design typically involves connecting components with the user interface via an API to enforce business logic.
Reusability in React: scenarios and examples#
Before focusing on the specifics, let’s briefly review React from the technical perspective.
React: A brief technical intro#
Before focusing on reusability in React, let’s look at React itself. React, also known as React.js or ReactJS, is a Meta (Facebook) maintained open-source frontend library. It was initially released in May 2013 and is still alive and kicking with a vibrant developer community.
React is unique because it is entirely based on the reuse of components. Having components allows React developers to create modular designs and develop code that is easier to maintain.
Let’s now examine some of the possible reusability scenarios in React user interfaces.
Scenarios for reusability#
The easiest form of reusability presents itself when we have repeated elements. When UI elements or functionality appear multiple times (e.g., buttons, forms, navigation bars), creating reusable components is a wonderful opportunity to create reusable components.
Another use case for reuse is when we need consistency. Consistency implies using the same components to help ensure a uniform look and feel across the application.
Another scenario of usage is when the developers require simplifying development, and it makes more sense to leverage existing components to avoid recreating logic and styles from scratch. This also helps maintainability because we only need to modify a single component rather than modifying code in multiple locations. This also improves scalability because when we keep adding components to a library, we end up with reusable components that support project growth and do so without sacrificing quality.
Understanding React components#
Let‘s start by understanding what we mean by components in React. Quite simply, every React app is made up of components. A
Here’s an example:
function MyAmazingButton(){return (<button>I'm a glorious component/button</button>);}
Having created MyAmazingButton, we can simply reuse it by nesting it inside another component, and we will discuss this further later.
export default function MyApp(){return (<div><h1>Welcome to my amazing app reusing a component</h1><MyAmazingButton /></div>);}
React hooks and reusability#
React hooks, introduced in React 16.8, revolutionized how developers create and manage stateful logic in functional components. They enable state and other React features without writing class components, simplifying code and enhancing readability. Hooks like useState and useEffect allow for state management and side effects handling, respectively, while custom hooks enable developers to extract and reuse logic across multiple components. This promotes reusability, making code more modular and easier to maintain. Developers can build more efficient, flexible, and scalable React applications by leveraging hooks.
Developers can leverage state management and event handling within functional components to create dynamic components with hooks. For instance, using useState, we can manage input values and dynamically update lists based on user interactions. Components can render dynamic content in real time by capturing input changes and updating the state. This approach simplifies the code and makes it more readable and efficient, enabling the creation of responsive and interactive React applications. We can develop maintainable UI components that boost productivity and elevate code quality using hooks.
React hooks provide a way to useState and life cycle methods in functional components. They simplify the codebase and promote reusable logic. Here are some commonly used React hooks:
The useState hook#
This hook allows us to manage the component state. We can create state variables and update them using the useState function. For example:
import React, { useState } from "react";function MyComponent() {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);}
Here, we see how we import useState from React and then in the function, we use it to maintain the state.
The useEffect hook#
This hook handles side effects (e.g., data fetching, subscriptions, etc.). It runs after rendering and can be used to manage cleanup. Example:
import React, { useState, useEffect } from "react";function MyComponent() {const [data, setData] = useState([]);useEffect(() => {// Fetch data and update state// Cleanup logic (if needed) can go here}, []);return (<div>{/* Display data */}</div>);}
In this example, useEffect fetches data and updates the state accordingly.
The useContext hook#
This hook allows us to access context values within our components. It is particularly useful for sharing data across the component tree.
To summarize, React hooks empower developers to write cleaner, more intuitive code while preserving the features of class components.
Creating custom React components#
Let’s explore the process of designing and implementing custom React components in more depth.
Creating a basic component#
As we had seen earlier, let’s create an independent React component. The way to do that is by simply extending the base React.Component class. The next thing to do is to define our component class, add methods, and use the render function to display data. Let’s look at some sample code in an example:
import React from 'react';class EmojiList extends React.Component {render() {const emojis = [{ emoji: '😀', name: 'grinning face' },{ emoji: '🎉', name: 'party popper' },{ emoji: '💃', name: 'woman dancing' }];return (<ul>{emojis.map((emoji, index) => (<li key={index}>{emoji.emoji} - {emoji.name}</li>))}</ul>);}}export default EmojiList;
Here, EmojiList is a custom component that renders a list of emojis. Notice how the component is structured in two portions and returns the actual item to be displayed in the render() function.
Using custom components#
Now that we have created a custom component, we must import it into other application parts. Once done, we can use it just like any other HTML element. Let’s see an example of how the above-created component can be used.
import React from 'react';import EmojiList from './EmojiList';function App() {return (<div className="container"><h1>Hello, World</h1><EmojiList /></div>);}
File structure and organization#
Large projects often result in unmanageable code, forcing developers to rely on search to find specific parts. A straightforward way to prevent unintended migraines within the team is to rebuild our file structure from the ground up for better readability. To organize the components above, we can group similar components—such as putting all emoji components into one folder.
Modern React practices#
In the ever-evolving landscape of React development, it's essential to prioritize modern practices that enhance both performance and developer experience. While class components remain a valid approach, emphasizing functional components and hooks as the preferred patterns reflects the current best practices in the React community. Functional components, combined with hooks like useState and useEffect, promote cleaner, more concise code and enable developers to leverage powerful features such as state management and side effects without the complexities of lifecycle methods. Focusing on modern paradigms helps developers create maintainable, scalable apps, aligning with the latest React advancements and fostering an intuitive coding experience.
Advanced composition and component design#
This section will explore advanced composition techniques, such as higher-order components (HOCs) and render props. These patterns allow us to create more flexible and reusable components.
To revise, creating custom React components involves defining reusable and encapsulated pieces of UI that can be used across different parts of an application. Each component is typically a JavaScript function or class that returns a React element, describing what should appear on the screen. Enhanced by React hooks, functional components allow developers to manage state and side effects without needing class components. Custom components receive data through props, which can be used to render dynamic content, ensuring that components remain reusable and maintainable.
To build a custom component, developers define its structure and behavior. This includes setting up the component’s state, handling events, and utilizing life cycle methods (or hooks) to manage side effects. For instance, a custom button component might manage its hover state using useState and trigger a callback function passed in as a prop when clicked. Developers can create modular, testable, and maintainable code by encapsulating specific functionality and UI within custom components, enhancing the overall development workflow and application architecture.
When creating custom React components, best practices include effectively managing props, state, and life cycle events. Props should be used to pass data and functions between components, ensuring they remain stateless and reusable. The state should be managed locally within components that need to track dynamic data, utilizing hooks like useState and useReducer for better control. Life cycle events managed through hooks such as useEffect, should handle side effects like data fetching and subscriptions, ensuring they are cleanly set up and torn down to prevent memory leaks. Developers can adopt maintainable, efficient, and scalable frontend development with React by adhering to these practices.
Styling and theming reusable components#
Styling reusable components involves ensuring they are visually consistent and adaptable to different contexts within an application. A key concern is maintaining a separation of concerns by keeping styles modular and encapsulated. This can be achieved through techniques like CSS modules, which scope styles locally to the component, or by leveraging class naming conventions, such as BEM (Block, Element, Modifier), to avoid conflicts. It’s also important to ensure that styles are responsive and accessible, adhering to best practices for web design. By addressing these styling concerns, developers can create components that are not only reusable but also maintain a consistent look and feel across the application.
CSS-in-JS libraries, such as styled components and emotion, provide a powerful approach to styling and theming reusable components. These libraries allow developers to write CSS directly within JavaScript, enabling dynamic styling based on props and state. Theming can be managed using context providers, allowing for a centralized and consistent application of themes across all components. Design tokens, which are the design decisions stored as data (e.g., colors, fonts, spacing), can be utilized to ensure that components adhere to a cohesive design system. This approach facilitates the creation of customizable and theme-aware components, promoting reusability and a consistent user experience.
Testing and documentation for reusable components#
Testing reusable components is crucial for ensuring their reliability, maintainability, and compatibility within an application. Comprehensive testing helps identify and prevent regressions as components evolve or are reused across different application parts. Using frameworks like Jest and testing-library/react, unit testing validates component behavior in isolation, ensuring that props are correctly handled, state changes are managed as expected, and UI renders correctly under various conditions. Integration testing assesses how components interact with each other and with external dependencies, verifying seamless functionality across the application. By establishing a robust testing suite for reusable components, developers can confidently deploy updates and maintain a high standard of code quality.
Documentation is pivotal in successfully adopting and integrating reusable components within a project. Clear and concise documentation should include usage instructions, prop types and their descriptions, examples of component usage with code snippets, and guidelines for customization and theming. Providing explanations of component behavior, expected inputs, and outputs helps developers understand how to effectively incorporate and extend components in different scenarios. Additionally, versioning and changelogs keep stakeholders informed about updates and improvements, fostering transparency and facilitating collaborative development efforts. By adhering to comprehensive documentation practices, developers can streamline the integration process, encourage component reuse, and promote consistent application of best practices across the development team.
Best practices#
Now that we have looked at how reusable components can be created in React, let’s do a quick recap on how we can maximize productivity by using some best practices given as follows:
Props and composition#
We can use props to make our components customizable and versatile. Props allow us to pass data and functions as props to child components. This allows for reuse of the same component but with different data or behavior.
Let’s see this via an example.
function Button({ label, onClick }) {return <button onClick={onClick}>{label}</button>;}
Immutability#
It is best practice to avoid directly mutating props or states within a component. Instead, we can simply create new objects or arrays. Immutable data ensures predictable behavior and prevents unintended side effects. Let’s see this via an example. In the first case, the issue is that we are modifying the state directly. In the second, we create a new state object for that.
// Bad: Directly modifying statethis.setState({ count: this.state.count + 1 });// Good: Creating a new state objectthis.setState((prevState) => ({ count: prevState.count + 1 }));
Default props and prop types#
We can also define default props using defaultProps to provide fallback values. We can also use prop types (propTypes) to specify the expected types of props. This helps catch potential issues during development.
Let’s see this through an illustrative example. In the code below, we have used defaultProps and assigned a label with a value. We have then used PropTypes to ensure that the label is of the type string, and that onClick should be a function. Both of them are required.
Button.defaultProps = {label: 'Click me',};Button.propTypes = {label: PropTypes.string.isRequired,onClick: PropTypes.func.isRequired,};
Functional components and hooks#
A recommended best practice for React is using functional rather than class-based components. They are simpler, concise, and can utilize hooks (e.g., useState, useEffect). Hooks allow us to manage component states and handle side effects without using class life cycle methods.
Let’s take a look at some sample code.
function Counter() {const [count, setCount] = useState(0);useEffect(() => {document.title = `Count: ${count}`;}, [count]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);}
The presented practices help contribute to cleaner, more maintainable code and enhance the reusability of our React components.
Additional resources#
We have seen how reusable component design can be implemented using React. Check out the resources below to learn further about System Design or React.
Free Resources
