We have shouldComponentUpdate in class based component as lifecycle method. This method can be used to achieve the performance optimization by comparing props (previous and next) and executing render conditionally .We have React.PureComponent as well which can do shallow comparison of state and props. But in functional component we don’t have such methods.Now, React has provided a memo method which will do the same functionality for the functional components.const functionalComponent = React.memo(function functionalComponent(props) {    /* render using props */ });We have wrapped the component inside the memo method. Memo method will memorize the result till the props are same. ... Read More

In a typical web application, client makes a http request through browser and server sends html page in the response with data.But in a single page application (SPA), we have only one page and whenever client makes http request to server it generally responses with a json/xml formatted data.For making http request we have some of the below options −XmlHttpRequestAxiosWindows fetchAxios is easy to work with react and handing requests.Lets install it firstnpm install –save axiosImport it in the jsx file before usingimport Axios from ‘axios’;From the component lifecycle post, we observed that componentDidMount is the best place to make ... Read More

Unlike other libraries like angular , forms in react need to handle by ourselves. There are two types of forms input in reactControlled inputsUncontrolled inputsControlled components or elements are those which are handled by react functions. Example is updating the field on onChange function call. Most of the components are handled in controlled way.Example for controlled form componentimport React, { Component } from 'react'; class ControlledFormExample extends Component {    constructor () {       this.state = {          email: ''       }    }    changeEmailHandler = event => {       ... Read More

Purpose of formic is to remove the complexity of form handling in react and make form submission simpler.Formic uses yup to validate the form fields which is very simple to useFirst install the formic librarynpm install –save formicExampleimport React, { Component} from 'react'; import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik'; export class FormExample extends Component {    handleSubmit = (values, {       props = this.props,       setSubmitting    }) => {       setSubmitting(false);       return;    }      render() {       return(         ... Read More

The error boundary mechanism helps to show meaningful error message to user on production instead of showing any programming language error.Create a react class componentimport React, {Component} from 'react'; class ErrorBoundary extends Component{    state={       isErrorOccured:false,       errorMessage:''    }    componentDidCatch=(error, info)=>{       this.setState({isErrorOccured:true, errorMessage:error});    }    render(){       if(this.state.isErrorOccured){          return Something went wrong       }else{          return {this.props.children}       }    } } export default ErrorBoundary;We have a state object having two variables isErrorOccured and errorMessage which ... Read More

Understanding error messagesIf there is an error in code execution react displays a readable error message on screen with line number. We should understand the error message to correct it.We have a below file App.js having one input element. On change of input value we see the console text −import React, {Component} from 'react'; class App extends Component {    onChangeHandler=(event)=>{       console.log(event.target.value);    }    render(){       return (                       this.onChangeHandler(event)}/>                 );    } } export default ... Read More

LETS SEE HOW TO CREATE SIMPLE REACT FUNCTIONAL COMPONENTComponents are building blocks of React library. There are two types of components.Stateful componentStateless componentStateful component has a local state object which can be manipulated internally.Stateless component does not have a local state object but we can add some state using React hooks in it.CREATE A SIMPLE ES6 FUNCTIONconst player = () => { }Here we used a const keyword to function name so that it does not get modified accidentally. Let's add a return statement with some jsx code.const player = () => {    return (       I'm ... Read More

Some basics of react routingReact-router is the main library and react-router-dom and react-router-native are the environment specific libraries. React-router-dom is used in browser based web applications generally. react-router-native is used in mobile based applications which can be developed using react-native.To install it use command npm install –save react-router-domThere are two types of router in case of web applications.BrowserRouterHashRouterThe difference between the two router types are visible in the way they formulate the URLs.e.g. https://hello.com/about => BrowserRoutere.g. http://hello.com/#/about => HashRouter (uses hash in it)BrowserRouter is more popular and it uses html5 history API to keep track of locations.HashRouter supports the legacy ... Read More

There are multiple ways to add bootstrap in react project.Using bootstrap CDNInstalling bootstrap dependencyUsing react bootstrap packagesUsing bootstrap CDNThis is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.Below is one of the react CDN urlIf we need the JavaScript components of bootstrap then we should add the jquery, popper.js in the index.htmlWith this the complete index.html will look like − React App hello             Adding bootstrap dependencynpm install bootstrap ... Read More

We bundle the files in React application using tool such as webpack. Bundling in the end merges the files in the sequence of their imports and creates a single file.The problem with this approach is that the bundle file gets larger with the increase in files. User may not be sung all the feature components but still bundle is loading them, this could affect the loading of application.To avoid this, code splitting is used in React.ExampleExample of bundling −// app.js import { total } from './math.js'; console.log(total(10, 20)); // 42 // math.js export function total(a, b) {    return a ... Read More