The popularity of React as a UI building library has been rapidly increasing over the past few years, and in this article, we’ll be exploring Reacts current rendering patterns, their problems, and how the new patterns introduced with React 18 aim to fix those problems. Well also dive into some web vital terminology, including Time to First Byte (TTFB), First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Time to Interactive (TTI). Currently, the most common rendering patterns in React are Client-side rendering and Server Side rendering, but there are newer patterns being introduced with React 18. Client-side rendering allows for fast time to first byte, but can result in a slow Largest Contentful Paint (LCP), and fetch data from an API to display relevant data to the users.
