Image for post
Image for post

📄 Table of Contents

How react works

import React, { Component, 
PureComponent,
lazy, Suspense,
useState, useEffect
}
from "react";
import ReactDOM from "react-dom";
import {createStore, applyMiddleware} from "redux";
import { Provider, connect } from "react-redux";
Class App extends Component{
constructor(props){
super(props);
this.state= {
count:0
}
}
render(){
return(
<div>
<Count />
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));ReactDOM.hydrate(<App />, document.getElementById(‘root')); # 'hydrate' in case of Server-side Rendering
class MyComponent extends Component {
state = {
counter: 0;
counter: this.props.initialCounterValue,
};
}
Image for post
Image for post
React Life Cycle version 15.6

this.setState()

this.setState(prevState => ({ expanded: !prevState.expanded }), ()=> )

Event Handling (recommended method) :

handleClick = (item) => (e) => {
e.preventDefault();
e.stopPropagation();
};
<MyInput onClick={this.handleClick(item)} />;
handleClick(item){
e.preventDefault();
e.stopPropagation();
};
<button onClick={() => this.handleClick()}>//OR<MyInput onClick={(e) => this.handleClick(item, e)}} />;
Image for post
Image for post
ComponentWillReceiveProps vs getDerivedStateFromProps
Image for post
ComponentWillReceiveProps vs ShouldComponentUpdate

Provider:

import { Provider, connect } from "react-redux";
const store=createStore(myReducer, applyMiddleware);<Provider store={store} />

connect()

const mapStateToProps = (state) => {
return {
myName: state.name
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeName:(name)=>{dispatch({type:"CHANGE_NAME", payload: name
})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Middleware:

import logger from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware"
const customMiddleWare = store => next => action => {
console.log("Middleware triggered:", action);
next(action);
}
const store=createStore(myReducer,
applyMiddleware(customMiddleWare, promise, thunk, logger
));
<Provider store={store} />

ContextAPI:

const {Provider, Consumer} = createContext({
locale:{},
logout: () =>{}
}

High Order Component:

const LoaderHOC = (WrappedComponent) => {
return class LoaderHOC extends Component {
render(){
return {
<WrappedComponent {...this.props} />}
}
}
}
export default LoaderHOC

Lazy Loading of Components (≥16.6):

import React, {lazy, Suspense } from "react";
const MyComp = lazy(() => import ('./components/myComp'));
<Suspense fallback = {<div> Loading... </div>}>
<MyComp> </MyComp>
</Suspense>

React Hooks (≥16.8)

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
# const [growth, setGrowth] = useState(0);
# const [nirvana, setNirvana] = useState(false);
# const [message, setMessage] = useState(‘’)

One -way Binding vs Two-way Binding

Reducers

Why to call super() & pass props to it

React.cloneElement vs this.props.children

render() {   
return(
<Paragraph>
<Sentence>First</Sentence>
<Sentence>Second</Sentence>
<Sentence>Third</Sentence>
</Paragraph>
)
}
render() {
return (
<div>
{React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
onClick: this.props.onClick })
})}
</div>
)
}
render() {   
return(
<Paragraph onClick={this.onClick}>
<Sentence>First</Sentence>
<Sentence>Second</Sentence>
<Sentence>Third</Sentence>
</Paragraph>
)
}

Render Props:

When Should We Use setState() in React?

Image for post
Image for post
those with GREEN background are the ones where setState() is allowed.
Image for post
Image for post

Conclusion

As discussed above, please remember NOT to use setState in render, componentWillUpdate and componentDidUpdate which lead to an infinite loop and throw an error.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store