Case Study

React.js

There are many frameworks and libraries available for frontend

development. Not all of them are good. React is one of the most
popular and widely used libraries (it’s not a framework) for frontend
development.

To give you a gentle introduction, React is an open-source JavaScript

library used for frontend development, which was developed by
Facebook. Its component-based library lets you build high-quality
user-interfaces for web apps.

This library allows you to place HTML code inside JavaScript and it
works with Virtual DOM.

Why react

1) Easy to learn

React is easy to learn and that is one of the most important reasons
to choose this library. As it doesn’t take much time to learn this
technology, you can quickly begin to build things with it.

2) Rich user-interfaces

React lets you build rich user-interfaces easily. Quality of user-

interfaces is important because a poorly designed user-interface is
generally less user-friendly and the users will not like a poorly
designed UI.

3) Faster development

Developer’s productivity is important because if you can get things

done quickly, you can earn more money in less time, which is a
common goal of companies and startups

4) It’s hot and trending

React is hot and trending. It’s one of the most popular frontend
technologies in the market.

5) Trusted by great companies

Why are so many great companies and startups using this

technology? The answer is that it’s undoubtedly a very high-quality
tool for frontend development.

Considering that super successful companies like Facebook and

PayPal use React, that must mean that it’s a truly useful library.

Future of React.js

Facebook and the entire ReactJS team have demonstrated the

commitment to enhancing ReactJS efficiency. This is crucial to
weather the fast emerging competition from other frameworks such
as Vue.js. Some of the things to expect in future releases include;

 ReactJS enthusiasts should expect new render types. For

example, the ReactJS team is likely to add unique fragment
syntax to the JSX that does not need keys.

 Developers are also expecting improvement in error

handling. In the past, cases of runtime errors during
rendering often put ReactJS in an awkward broken state.
This requires regular page refreshing. The current model of
addressing the error is throwing it inside the component or
lifecycle methods. Though this helps to prevent rendering
corrupted data, it is not the best idea for better UX.

 Enhancing server-side rendering. Though the latest ReactJS

comes with an entirely rewritten server render which makes
it very fast and ideal for streaming, it is a great place to pitch
improvements.

How to create a reactJs app :

 Step 1: Install NodeJS. You can download the form their official website of NodeJS.
Download and install the latest version of NodeJS.

 Step 2: Run the below command in your terminal or command prompt.

npm install -g create-react-app
Step 3: Create a react app. Now to create an app we will use the command.
npx create-react-app my-app

Display App Directory :
 Step 4: Start the development server. To start the development server, go inside
your current directory “myapp” and execute the below command:
npm start

Execute the react App Path: http://localhost:3000/

What is React Used For?

ReactJS is a multi-purpose, open-source library that is mainly used in

front-end development, focusing on building user interfaces. It
developed a new way of rendering websites, evolving the responsive
nature of web pages.

• React is the perfect choice when you want to develop Single

Page Applications (SPAs) as it can rewrite and update content on a
web page without requiring to reload or refresh the page.

• React Native, a React-based mobile framework, is a top choice

for developers to create native mobile apps.

• Large social media sites, such as Instagram, Facebook, and

Reddit use ReactJS for front-end website development needs.
• Newspaper agency New York Times, streaming service Netflix,
and Customer relation system SalesForce also use ReactJS for the
development of their mobile app.

Features of React

 It allows developers to write their apps within

JavaScript. JSX is one of the greatest features that not
only makes ReactJS easy but fun too. Developers can
easily make a new UI feature and see it appear in real
time. It brings HTML directly into your JS.

 Components allow developers to break down complex

UI. The idea of components is what makes ReactJS
unique. Instead of worrying about the entire web app, it
makes it possible to break the complex UI/UX
development into simpler components. This is crucial
in making every component more intuitive.

 The Props make it possible to populate components

using custom data. Pros in ReactJS make it possible to
pass the custom data to a specific UI component. This is
a great way of filling a blank when rendering JSX
components.

 The State makes it possible to store all the changes in

one section. When using ReactJS, developers take all
the content that can change during the application and
place it in a single location (State). With state, single
 web application becomes very simple because all the
details are sourced from one section.

 It uses Virtual DOM that makes the app fast. When

ReactJS was crafted, the designers rightly predicted
that updating old HTML would become extra crucial
and expensive. Therefore, the idea of Virtual DOM
helps allows ReactJS to know when exactly to re-render
or when to ignore some specific pieces of DOM because
it can detect when the data has changed. A UI that
reacts promptly is crucial in enhancing the user
experience.

Problems in React

. Not Capitalizing Component Name

The name of each React part should start with a capital letter in any case
assuming we utilized that segment, the program will regard that segment as an
implicit component like range or div, and you may get the admonition. To
avoid this kind of warning, always start the React component name with the
upper case letter.

For example

class greeting extends React.Component {

// ...
}

If you try to render <greeting />, React will ignore the above and you will get a
warning:
[WARNING]
The tag <greeting> is unrecognized in this browser. If you meant to
render a React component, start its name with an uppercase letter.

. Utilizing class rather than className

While indicating the class name of the component in React, new learners use
class rather than className and this gives them blunders. As class watchword
is as of now held in JavaScript and JSX is only an expansion of JavaScript that is
the reason React utilizes className rather than class.

. Wasted rerenders

Wasted renders are one of the most common React JS problems.

What’s causing them?

To understand it, we need to first comprehend how data is passed in React.

There are many ways, but one of the simplest is through “props” (data passed
directly to the component).

Say there’s an element such as “Item” which may represent a single item on
the list. If there is a list of two items and developers want to pass a value that
is computed in the list to each one of the cards, they can do it this way:
The problem here is that each time “getNewValue” is called, each item of the
list is rerendered, which is a waste of resources as the value is always the
same.

The above example here is a dummy one in order for the example not to look
too complicate.

Source- brainhum.com

Discussion on major problems

Wasted rerenders
In real life, developers could deal with complex data structures being
rerendered which visibly slow down the performance, e.g. messages in a group
chat – a large collection of elements that contain text, images, and quotes of
other messages.

Do end-users notice “wasted renders” or maybe is it simply a flaw for

developers?

The answer is: this is often a problem for the end-user as well.

The end-user will notice:

• a waste of CPU, as the processing unit needs to recalculate the same
value(s), thus, resulting in faster battery drainage,

• slow down of the application if the rerenders happen often (dozens of

times per minute) and require repeatable heavy computations – often
perceived by users as “app lagging”.

A tool that greatly eases the pain of manually checking every rerender is “Why
did you render”.

How can developers use it?

By launching it in the app initialization and adding a whyDidYouRender static to

the components they want to track, just like this:

class BigListPureComponent extends React.PureComponent {

static whyDidYouRender = true

// a lot of logic and handlers

render(){

return (

// a list of 1000000000000 entries

}
}

If anything goes wrong a notification will pop up in the console:

Source- brainhub.com

The fix for that is easy to implement, however, one needs to be careful not to
eliminate rerenders when they really need to happen.
Developers can use “PureComponent” which performs a shallow comparison
of arguments passed to a component with the previous values and then
decides if the component needs to rerender.
Quite often, however, this is not enough and developers need to manually tell
the components if they need to rerender by providing custom comparison
functions.
If the components are arranged in a way that observable data is set at the very
top of the screen’s hierarchy component then this practice may accidentally
cause a wasted rerender which happens each time a character is added to or
deleted from the input field that is located on the screen and connected to a
data provider such as Redux.
PureComponent or a React’s new feature of “React.memo” lets developers
prevent such situations.
to improve the app’s performance and avoid unnecessary rerenders use a
detection tool called “Why did you render” and implement necessary fixes. Try
“PureComponent”, a tool that determines if the component needs a rerender
and either lets it pass, or stops it.

Conclusion
At the end of the day, React only solves the UI problems
Teams should keep one thing in mind – React alone is only a UI library which is
rarely enough and is never sufficient when the application grows complex.
Complex projects often need a toolkit that could handle the app’s logic and
effectively manage the current state. Using React JS alone for that purpose will
only result in a bloated codebase that will become hard to manage. In such
cases, libraries like Redux or MobX might prove useful.

Although React is usually considered a well-performing technology if not used

carefully it too can cause some problems.
When developing React apps pay attention to good practices from the start
and try to identify potential stumble blocks ahead of time.
This approach will help your team to save time at a later point and will prevent
users from experiencing problems.