This HOC Cheatsheet compiles all available knowledge for writing Higher Order Components with React and TypeScript.
There are a lot of use cases where an HOC is used. For example:
type PropsAreEqual<P> = (
prevProps: Readonly<P>,
nextProps: Readonly<P>
) => boolean;
const withSampleHoC = <P extends {}>(
component: {
(props: P): Exclude<React.ReactNode, undefined>;
displayName?: string;
},
propsAreEqual?: PropsAreEqual<P> | false,
componentName = component.displayName ?? component.name
): {
(props: P): React.JSX.Element;
displayName: string;
} => {
function WithSampleHoc(props: P) {
return component(props) as React.JSX.Element;
}
WithSampleHoc.displayName = `withSampleHoC(${componentName})`;
let wrappedComponent = propsAreEqual === false ? WithSampleHoc : React.memo(WithSampleHoc, propsAreEqual);
return wrappedComponent as typeof WithSampleHoc
};
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4