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:

const element =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘The world isn't simple without JSX.’)
 )

React Element In JSX:

const jsxElement = (
  <div>
    <h1 style={{color: red}}>The world is Simple with JSX</h1>
  </div>
)

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.

class Button extends Component {
 render(){
  return <button  style={{color: this.props.color}}>Button</button>
 }
}
Button.defaultProps = {
color: 'blue'
}
<Button/> // render a button with default blue text
<Button color='red'/> // render a button with red text 

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!

export default const SmartComponent = (){
  return (
   <h1>I am a Functional Component</h1>
  )
}

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.

class MyComponent extends Component {
  render() {
    return (
      <div>This is my component.</div>
    );
  }
}

export default MyComponent;

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.

Instead of this 
<button onClick={{}=> setCount(count + 1)}>Increase</button>
Use this 
<button onClick={handleIncrease}>Increase</button>

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.