React
React - Optimize Performance
Case 1 - Preventing Wasted Renders with Complex Props
Create new object reference before delete a key.
Class
Function
Case 2 - Preventing Wasted Renders in a Simple Component
Class
Function
Before
After
Caching Expensive Operation Results
Lazy Loading Components
Component:
Fallback:
React - Testing
React - HOC (Higher Order Component)
import React, {ReactElement} from 'react';
const withAds = (Component: React.ComponentType) => {
return (props): ReactElement => {
// Write logic here.....
return <Component {...props} />;
};
};
export default withAds;