3. It receives a function as input and/or return a
new function as output
Higher Order Function
Also called First Class Citizen or First Order
Functions
10. Dryer code
Create more modular code
Emphasizes functional programming to stress data immutability
Avoid code duplication
Easy to maintain and to work with
CODE REUSABILITY!
What you get from HOCs
Editor's Notes
Hi everyone, my name is Lee Byron and I work at Facebook on a team responsible for building the tools and technology to make it easier to build high quality products. Over the last few years I've worked on a bunch of stuff you may have heard of including GraphQL, Immutable.js, and what I'm here today to talk about: React.
React was started at Facebook in 2012
Functions are said to be first class citizens or first order functions when that functions are treated as variable. A function is passed as argument.
High order components are functions that accept a components as parameters and return an enhanced component. Before we can go deeper on HOC, let’s step back and understand the High Order pattern.
Manipulate props. Inheritance inversion – The HOC can have access to the state, life cycle hook of the wrapped component.
Render Highjacking – Render something entirely different then the original component.
*Live code:
1) style wrapping – Title component
2) Highjacking – Home component - loggedIn
Here’s a stateless dashboardheader component. If there is a user on the props, it will return the welcome message and the user name
Here’s our new Higher Order Component that takes a Component as argument and return an enhanced component with a new prop called userInfo so the component that is being wrapped can have access to that prop user. To use the Higher Order Component, just pass the Component to withUser function as input and then assign an enhanced component with User info.
Higher-Order Components are just High Order Functions and they should be pure functions. No side effects. We don’t want to mutate any data. Data are always passed arguments. Also, they have to be predictable.
Live code:
1) CatWihoutHOC
2) Let’s refactor this Cat. CatWithHOC – withForm HOC
Manipulate props. Inheritance inversion – The HOC can have access to the state, life cycle hook of the wrapped component
