21/365: Cross Cutting Concerns

 Certain functionalities are universally required in apps. No matter what kind of app you're building there is a good chance it will need a way to handle user logins with permissions, logging, and error handling. These are known as cross cutting concerns. You may also find that two different components share a majority of their underlying logic. For example, a component that displays the number of people in a mailing list and a component that displays all the active orders for a business could be 80% the same under the hood. As we know, well designed programs do not repeat themselves. One way to extract this functionality is with a custom hook. The issue with the custom hook is that any component they are used in becomes stateful. This violates another principle of app design, that we want to keep our state as lean as possible with the minimum number of stateful component. The solution here is to use an advanced tool in React called a higher order component. The higher order component is a function that takes another component as its argument and returns another component with enhanced functionality.