Book Image

Redux Made Easy with Rematch

By : Sergio Moreno
Book Image

Redux Made Easy with Rematch

By: Sergio Moreno

Overview of this book

Rematch is Redux best practices without the boilerplate. This book is an easy-to-read guide for anyone who wants to get started with Redux, and for those who are already using it and want to improve their codebase. Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you from the simplest through to the most complex layers of Rematch. You’ll learn how to migrate from Redux, and write plugins to set up a fully tested store by integrating it with vanilla JavaScript, React, and React Native. You'll then build a real-world application from scratch with the power of Rematch and its plugins. As you advance, you’ll see how plugins extend Rematch functionalities, understanding how they work and help to create a maintainable project. Finally, you'll analyze the future of Rematch and how the frontend ecosystem is becoming easier to use and maintain with alternatives to Redux. By the end of this book, you'll be able to have total control of the application state and use Rematch to manage its scalability with simplicity.
Table of Contents (18 chapters)
1
Section 1: Rematch Essentials
6
Section 2: Building Real-World Web Apps with Rematch
11
Section 3: Diving Deeper into Rematch

Virtualizing large lists

List virtualization consists of just rendering items visible to the user. Essentially, when the user scrolls, we programmatically show the relevant items that should appear in the DOM and hide those that shouldn't.

Looking at our Amazhop website, you have probably noticed that we're rendering the whole products array even if a given product is not visible in the viewport. This is not an issue if we're rendering the first 10 products, but what about rendering 5,000 products, creating 5,000 nodes with 5,000 images when probably only 5 can be displayed? This makes no sense.

That's why some React folks created some libraries such as react-window and react-virtual, which reduce the amount of work and time required to render the initial page and, of course, for the process of updating this data.

In the next section, we'll see some React optimizations that we can include in our Amazhop application to avoid unnecessary re-renders and...