HOC (Higher-Order Components)/ Component Wrapping/ Render Props with examples

Step-by-step guide of advanced technique in React for reusing component logic

What will be covered

• Prerequisites;
• HOC (Higher-Order Components);
• Render props;
• Component Wrapping;

Prerequisites

Create react app with typescript template and clean-up from all unnecessary files like styles, logo, and test files:

yarn create-react-app react-hoc-examples --template typescript

Let’s say we have three simple components that will represent three common API fetch states:

• API fetch result is empty → <Empty/> component;
• API fetch failed/error → <Error/> component;
• API fetch is in progress → <Loading/> component;
• useFetchData hook that will fetch data when component mounted and return {data, error, isLoading} props as a result;