Simplify Your React App’s Complexity

Page Components vs. Block Components

When building a React application, it’s essential to organize your components into functional blocks of HTML. This approach is similar to managing “pages” separately from “blocks” of content in Content Management Systems (CMS). For instance, consider an application with a blog post object that has multiple representations:

• A page specific to that single blog post
• A blog main page with a list of 10 posts per page
• A “newest posts” section on the homepage
• An author page with all their posts

The blog page focuses on the individual blog post content, while the blog block can be used anywhere, regardless of context.

Tying Pages to URLs

To separate functionality into pages in React without sacrificing the ability to pass information between, it’s essential to structure your app with many page components that can utilize any number of block components. One popular way to do this is by using react-router.

import { BrowserRouter, Route, Link } from 'eact-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/" component={HomePage} />
      <Route path="/blog" component={BlogPage} />
      <Route path="/blog/:postId" component={BlogPostPage} />
    </BrowserRouter>
  );
};

The Power of the History Object

The DOM already has an object that contains all the properties of the URL segments: the history object. This object manages where you’re at and where you’ve been using state! By passing the history object into props on page components, you can maintain state variables even if they change at the top level, down into each page, and between them.

const BlogPostPage = ({ history }) => {
  const postId = history.location.pathname.split('/').pop();
  // Use postId to fetch blog post data
};

Step-by-Step Guide to Simplifying Your App

1. Pages: Break down your app into separate pages, each with its own responsibility. With react-router, you can pass params into the URL, even dynamically setting URLs.
2. Mapping the History: By taking dynamic URL pieces and moving them into parameters, you can avoid the need for the application to have knowledge of the database. This has significant processing savings implications.
3. The Fun Stuff: react-router includes the ability to pick up on parameters, hashes, or anything else you may want to check in the URL. Every one of these is immediately available for the page component.

Simplify Your State and Props

After refactoring, you can think of each page of your application as separate mini-apps, only responsible for their own features. Break out repeated features between pages into block components that get used on each page. This keeps your state and props few and responsibilities small.

const BlogPostBlock = () => {
  // Render blog post content
};

const BlogPage = () => {
  return (
    <div>
      <BlogPostBlock />
      <!-- Other page-specific content -->
    </div>
  );
};