Reusability — HOC
Small & Function-specific Components
Component Name After the Function
Component Names must be in Capitals
Lazy Loading
Use JSX ShortHand
Use Ternary Operators
Use Fragments
Don’t Define a Function Inside Render
Use Memo
Put CSS in JavaScript
Use Object Destructuring
Use Template Literals
//Ternary Operators
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />import react, { useState } from "react";
import { Switch, Route, Redirect} from "react-router-dom";
const App = ()=>{
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/services" component={Service} />
</Switch>
)
}
export default App;
///////////////////////////////////////////////////////////////////
import {userouteWatch} from from "react-router-dom";
const {path, url} = userouteWatch ();
const Child= ()=>{
return (
<>
<Link to={`${url}/1234`} ></Link>
<Route path={`${path}/:id`} exact component={Home} />
<Route path="/services" component={Service} />
</>
)
}
export default Child
/////////////////////// Conditions ////
const Child= ()=>{
return (
<> <Route path={path} >
<Link to={`${url}/1234`} ></Link>
</Route>
<Route path={`${path}/:id`} exact component={Home} />
<Route path="/services" component={Service} />
</>
)
}
export default Child
import React, {usereducer} from 'react'
const initialstate = 0;
const reducer = (state, action)=>{
switch(action.type){
case 'increment':
return{
state+1
}
case: 'decrement':
retutn{
state-1
}
}
}
const MyComponent = ()=>{
const [state, dispatch] = useReducer(reducer, initialState);
return(
<>
{state}
<button onClick{()=> dispatch({type:'increment'})}>
increment
</button>
</>
)
}“Profiler API” Its purpose is to help identify the part of an application that are slow so that we can check your component performance
So maybe benefit for optimizations
render(
<App>
<Profiler id="Panel" onRender={callback}>
<Panel {...props}>
<Profiler id="Content" onRender={callback}>
<Content {...props} />
</Profiler>
<Profiler id="PreviewPane" onRender={callback}>
<PreviewPane {...props} />
</Profiler>
</Panel>
</Profiler>
</App>
);function onRenderCallback(
id, // the "id" prop of the Profiler tree that has just committed
phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
actualDuration, // time spent rendering the committed update
baseDuration, // estimated time to render the entire subtree without memoization
startTime, // when React began rendering this update
commitTime, // when React committed this update
interactions // the Set of interactions belonging to this update
) {
// Aggregate or log render timings...
}“Render prop” we can share code between React components using a prop whose value is a function.
<Mycomponent render={(isAdmin)=> isAdmin ? 'login' : 'logout'}/>
{this.props.render}redux: main library (independent from React)
redux-thunk: a redux middleware that helps you with async actions
react-redux: connects your redux store with ReactComponents
react-redux – bindings between redux and react. The library offers a set of react hooks – useSelector(), and useStore() to get the data from the store, and useDispatch() to dispatch actions. You can also use the connect() function to create HoCs (higher-order components), that listen to the store’s state changes, prepare the props for the wrapped component, and re-render the wrapped components when the state changes.
redux-thunk – middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action or to dispatch only if a certain condition is met. Used mainly for async calls to API, that dispatch another action on success/failure.
First of all – the Virtual DOM was not invented by React, but React uses it and provides it for free.
A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes, and content as Objects and their properties.
The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction
Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.
Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.
Mounting – Birth of your component
Update – Growth of your component
Unmount – Death of your component