Concepts of React JS — Part 2

📄 Table of Contents

◉ setState()

this.setState({color: "red"},()=>{
console.log(this.state.color);
}

why to use setState()

this.state.message = 'don't update state like this';

◉ render.props()

JSX

JSX

◉ React Fragment

class ExampleTable extends React.Component {
render() {
return (
<table>
<tr>
<ExampleColumns />
<tr>
</table>
);
}
}
class ExampleColumns extends React.Component {
render() {
return (
<div>
<td>col 1</td>
<td>col 2</td>
</div>
);
}
}
<table>
<tr>
<div>
<td>col 1 </td>
<td>col 2</td>
</div>
</tr>
</table>
class ExampleColumns extends React.Component {
render() {
return (
<>
<td>col 1</td>
<td>col 2</td>
</>
);
}
}

Change state of a child component from its parent.

Pass Data from Child to Parent

Why pass Props to super()

class MyComponent extends React.Component {
constructor() {
console.log(this); // Reference Error
}
render() {
return <div>Hello {this.props.name}</div>;}
}

In contrast:
class MyComponent extends React.Component {
constructor() {
super();
console.log(this); // this logged to console
}
render() {
return <div>Hello {this.props.name}</div>;}
}
class MyOtherComponent extends React.Component {
render() {
return <div>Hi {this.props.name}</div>;
}
}

◉ Why Middle-wares ?

Currying Example
const customMiddleware = store => next => action => {
...
}

◉ Handle events using arrow functions

handleChange() {…}
render() {
return(<MyInput onChange={...} />
}
onChange={ this.handleChange }
render() {
return(<MyInput onChange={ this.handleChange.bind(this) } />
}

Binding methods in property is anti-pattern. Why ?

render() {
return(
<MyInput onChange={ this.handleChange.bind(this) } />.
<MyAnotherInput onChange={ this.handleChange.bind(this) } />
)
}
class MyClass extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this)
}
}
adduser = () => {}

[3]. If we are not using arrow functions , another alternative is to call the method and binding on React element itself −

addUser(){}<button onClick={ (e)=>{this.addUser(e)}}>
Add User
</button>

Arrow function as method is the Recommended one

handleChange(e) {…}
handleChange = (e) => {…}
<MyInput onKeyPress={ (e) => handleKeyPress(item, e) } />
handleKeyPress = (item) => (e) => {…}
import React, { Component } from "react";
import { MyInput } from "myInputs";
class MyComponent extends Component {handleKeyPress = (item) => (e) => {
e.preventDefault();
if (e.nativeEvent.keyCode === 13) {
console.log(`This is enter on item, which is called
${item}!`);
}
};

renderItem(item) {
return <MyInput onKeyPress={this.handleKeyPress(item)} />;
}

render() {
const items = ["Item1", "Item2", "Item3"];
return
<div>
{items.map(this.renderItem)}
</div>;
}
}
event handling using arrow function
event handling using .bind(this, “goal”)

◉ Benefits of Server Side Rendering Over CSR

Access the Redux Store Outside a React Component

◉ Error handling in React 16

1. <React.StrictMode>

StrictMode checks are done in development mode only and will NOT affect your production build.

Like Fragment, StrictMode does not render any UI, it only activates checks and adds warnings at runtime.

How to use it?

2. Error boundary in React.js

import 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 <p>Something went wrong</p>
}else{
return <div>{this.props.children}</div>
}
}
}
export default ErrorBoundary;
componentDidCatch=(error,info)=>{
this.setState({isErrorOccured:true, errorMessage:error});
}

How to use error boundary

<ErrorBoundary>
<User/>
</ErrorBoundary>

Please note that this error boundary approach only works in production mode of build. In development mode, it simply displays the actual error on browser instead of these custom errors.

Error Boundaries in React

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.