React scripts used to be difficult to make a React app. A lot of setting was required, especially when using webpack & Babel until you could actually get your hands dirty & create something useful.
The script command termed react-scripts, along with the helpful module Create React Application, have greatly simplified the process of creating React applications. Due to any error, you will notice react-scripts: command not found.
This tutorial will provide an introduction to React and its associated react-scripts, as well as a comparison of several scripting options and a discussion of how to Create React App greatly simplifies the React development process. Let's just jump right in!
Issues with speed, load times, and search engine optimization (SEO) are all possible when building out a React project. Thankfully, there are straightforward answers to these problems. A few helpful pointers from experienced React developers are provided.
Issues with performance and React JS
Although it's true that React has a good performance rating, special caution must be made in certain situations.
Understanding the notion of virtual DOM
To address performance issues with React, we must first comprehend how its user interface is rendered.
In this context, the ideas of DOM & virtual DOM are crucial.
The Document Object Model (or "DOM") is the hierarchical structure of a website's objects. In common parlance, this refers to the building blocks of a website or HTML.
When the actual Document Object Model (DOM) needs to be updated, its memory copy (the "Virtual DOM") is brought up to date alongside it. This method allows developers to decouple the DOM from the underlying implementation details, such as attribute manipulation, event management, and manual updates.
Extremely detailed itemized listings
When using React JS, a big and complicated list of items is a common source of recurring performance issues.
Let's pretend the app has to render a large number of cards (hundreds, in some cases) that contain images (or, better yet, carousels of images), titles, links, ratings, and such, and that all of these elements must be rendered in a responsive fashion.
Low-end PCs & mobile devices may feel the slowness immediately.
This occurs because React requires to track updates to each list item. This procedure is very resource-intensive.
The good news is that this problem can be easily resolved by employing virtualized lists.
To conserve resources, a virtualized list displays only the content now visible on the screen & hides all other components until the user scrolls down or up.
As can be seen in the accompanying diagram, only those elements are rendered which are within the current viewport. There are gaps where information should be.
Issues with indexing by search engines
There is an issue with client-side web apps. Single-page applications (SPAs) built with React JS may look and feel great and perform just like native apps, and they are not optimized for search engines like Google.
The reason for this is that a search engine (like Google or DuckDuckGo) only sees HTML tags & a few scripts that it will be allowed to load.
Even while modern search engines are able to load the code and crawl the site, it is still a time-consuming operation.
Find solutions to common issues with React JS, such as inefficient renderers.
Since the value is always the same, repeatedly calling "getNewValue" causes the entire list to be rerendered, which is wasteful.
That's why this particular example is a fake; it keeps things from appearing overly complex.
Messages in a group chat, for example, are a complicated data structure consisting of a vast group of components that contain text, graphics, and quotations of other messages, and developers may need to deal with re-rendering, which clearly slows down performance.
Is the issue of "wasted renderings" noticed by users, or is it merely a bug for programmers?
The response is that the user also frequently encounters this issue.
Consumers will detect:
It's inefficient to constantly recalculate the same values, which can lead to rapid battery depletion and sluggish performance in applications if redraws frequently occur (dozens of times per minute) and demand repeated intensive calculations.
The hassle of double-checking every re-render is substantially reduced with the help of "Why did you render?"
Thankfully, the aforementioned SSR kicks in at this point. Having the HTML pre-rendered on the server provides the crawling bot with all the information it needs to correctly index the site.
Note: Only a member of this blog may post a comment.