Core Fundamental of React And Performance Boosting

React is by far the most popular JavaScript library for UI (Front End Interface). Today I am trying to explain Core Fundamental of React and Performance boosting of app. In today’s article, I am covering JSX, Virtual DOM, Default Props, Function Component, Class Component and React App Optimization tips.

JSX:

What is JSX? In one word, JSX is the syntactic sugar for React.createElement function. It makes create element function simpler to create html markup.

React Element without JSX:

React Element In JSX:

In JSX, you can write dynamic code inside {}.

React Virtual DOM:

What is Virtual DOM? DOM stands for ‘Document Object Model’. And in React Virtual DOM is just like the Lightweight copy of DOM. When something have to change in DOM, react identify it with Virtual DOM, and only render the necessary part of the DOM. That’s how React Application is sooo fast and that is why it called React. It can react to changes.

Default Props:

Default props is the default properties for class component. If you don’t provide any value for a props, default value will be applied there.

Function Component:

Function Component or React Functional Component brings the new dimension in React Application. With the introduction of React Hooks, it is now possible to build a complete app with just Function Components! Here is example of how simple creating React Component is now!

Class Component:

There few types of components in React. Class Component is one of the most common one. Although it is more complex to write then functional component, it offers more control in managing lifecycle of hooks. You need 4 things to declare a class component. class keyword, name, extends component and a render method. Inside render method, return the element you want to show in UI.

Optimizing React App:

Nobody likes to wait. Neither your app user. So we have to build smooth and speedy to satisfied our users. There are few ways to improve the speed and smoothness of a React apps. Here I try explain some of ways in my way.

  1. Production Build: If are using developer build version, your app will take more time to load. Make sure you are deploying the optimized production build.
  2. Avoid Using Index as Key for Mapping: When we map over a data collection, sometimes use index as key attributes. This will slow down our app. Therefore use different value as key.
  3. Avoid Using too many Props on DOM Element: Using too many props on DOM element also hamper app performance. In stead we can use one or two objects as props.
  4. Avoid Inline Function: As functions are objects in JavaScript, inline functions will always fail the React diff app. And will slow down app.

5. CSS Animation in stead of JS Animation: There is another quick performance boosting tips. If we use JS library or custom JS to animate UI, that also affect web page performance. Use custom CSS animation for better performance. I also used Vanilla CSS Animation for my Portfolio Website.

Last bonus performance tips, optimize your image size with tinypng.

That’s all for today. Writing this help me understanding few concepts clearly. I hope it will be helpful for some beginner developer too. See you again. Have a nice day.

MERN Stack (JavaScript) Web Developer