Download to read offline
Higher Order Component React
- 1. By Heber Silva Pronounce: (Irish: Éibhearor Hebrew: HÉber)
- 3. It receives afunction as input and/or return a new function as output Higher Order Function Also called First Class Citizen or First Order Functions
- 4. Examples of HigherOrder Functions High Order Arrays
- 5. High Order Components(HOCs) are functions that accept components as parameters and return an enhanced component What are Higher Order Components?
- 7. Use of HOCs Componentto wrap
- 8. The Higher-Order Component Implementin gthe HOC Use of HOC
- 9.
- 10. Dryer code Create moremodular 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
- #2 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.
- #3 React was started at Facebook in 2012
- #4 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.
- #6 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.
- #7 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
- #8 Here’s a stateless dashboardheader component. If there is a user on the props, it will return the welcome message and the user name
- #9 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.
- #10 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
- #11 Manipulate props. Inheritance inversion – The HOC can have access to the state, life cycle hook of the wrapped component