Create React App (from 1.0 onwards) allows us to dynamically import parts of our app using the
import()proposal. You can read more about it here. While, the dynamic
import() can be used for any component in React apps; it works very well with React Router. Since, React Router is figuring out which component to load based on the path; it would make sense that we dynamically import those components only when we navigate to them.
Typical scenario in our React App with React Router will look something like this.
So today I will try to explain what is HOC ( Higher Order Component ) and why we use this type of components in React Apps. Explanation of HOC from React docs is: “A higher-order component is a function that takes a component and returns a new component”. Manny beginners in React are not aware that with HOC can create better apps without repeating code. Let’s see that in example. Let say that we need authorization in our app and we need to be sure that component is not shown if user is not logged in without HOC we can write something like this: