Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React Application Architecture for Production
  • Table Of Contents Toc
React Application Architecture for Production

React Application Architecture for Production - Second Edition

By : Alan Alickovic, Anthony Alicea
close
close
React Application Architecture for Production

React Application Architecture for Production

By: Alan Alickovic, Anthony Alicea

Overview of this book

Building production-grade React applications requires making dozens of architectural decisions, often with little cohesive guidance. This book teaches proven architectural patterns for building scalable, maintainable frontend apps, based on timeless principles and modern best practices. This updated edition features a modern stack: React Router in framework mode, TypeScript, TanStack Query, Zustand, React Hook Form, Zod, Shadcn UI, Vitest, and Playwright. It also adds new chapters on performance, accessibility, and internationalization. You’ll work through a real-world example that brings modern architecture concepts to life. Starting with architectural foundations, you’ll make informed decisions about project structure, enforce code quality, build a well-designed component library, and implement the right rendering strategies. From there, you’ll build robust API layers with types generated from an OpenAPI specification and implement the right state management strategies for each use case. You will also learn about different testing strategies and when to use them, how to secure the application, and how to make it performant so that it remains scalable and maintainable. By the end, you’ll be prepared to design and build scalable React apps from the ground up and lead technical decisions in real-world projects.
Table of Contents (17 chapters)
close
close
15
Other Books You May Enjoy
16
Index

Large data set optimization

When dealing with large data sets, performance can become a bottleneck for both the server and the client. The server must process potentially thousands of records, increasing response time and bandwidth usage. The client must render all those records, which can be slow and memory-intensive, especially on mobile and lower-end devices.

We can address these challenges with two techniques: pagination, which reduces the amount of data transferred, and virtualization, which reduces the number of list items rendered on the page.

Pagination

Instead of returning all ideas at once, we can implement infinite pagination to fetch a set of ideas, then fetch more ideas as the user scrolls or clicks a "Load More" button. This way, users start with a small, fast-loading set of data and can load more when they need it.

Figure 8.5 – Infinite pagination

Figure 8.5 – Infinite pagination

React Query provides the useInfiniteQuery hook specifically for this pattern. It manages multiple pages of...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
React Application Architecture for Production
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon