Pure & Higher Order Components

class: center, middle, inverse
# Pure & Higher Order Components
[@gunar](https://twitter.com/gunar)
???
Introduce yourself
---
class: middle
# Pure Components
.hidden[
# Pure Function
]
???
- Premisa que FP e Composicao de Funcoes é algo bom
- React 0.14 introduziu a possibilidade de usar funcoes puras como componentes.
---
class:  middle
.linethrought[
# Pure Components
]
# Pure Function
---
class: center, middle, inverse
# Dado um input,
# sempre retorna o mesmo output
---
class: center, middle, inverse
```
Math.max(5, 10) === Math.max(5, 10)
```
???
Funcao propriamente dita, da matematica
---
class: right, middle
# Não produz side-effects
---
class: middle
```
function deleteFile(fileId) {
  api.post({ action: 'delete', fileId }) // side-effect
} // returns nothing
```
???
- Note que Item 2 nao retorna nada.
---
class: center, middle, inverse
# Nao depende de estado mutável externo
---
class: middle, inverse
```
// "counter" is a global mutable state
function incrementCounter() {
  counter = counter + 1
}
```
---
class: middle, inverse
```
// could be rewritten as the following pure function
function incrementCounter(counter) {
  return counter + 1
}
```
---
class: middle, inverse
```
// "counter" is a global mutable state
function incrementCounter() {
  counter = counter + 1
}
```
```
// could be rewritten as the following pure function
function incrementCounter(counter) {
  return counter + 1
}
```
???
- Material do Eric elliot
- non-determinism = parallel programming + mutable state
---
class: left, middle
# Pure Components
.linethrought[
# Pure Function
]
???
- Vou só dar uma geral, podemos conversar depois sobre os benefícios de usar
---
class: center, middle, reverse
# Nem Classes ES6
#### Nem `createClass()`
---
class: middle, inverse
```
const Saudacao = props =>
  <p>
    Olá, {props.name}!
  </p>
```
--
> "Uma app React idiomática consiste principalmente de componentes funcionais (puros)."
--
.footnote[Idiomática: que é próprio e característico de um idioma]
---
class: right, middle
#### Componentes puros tem
# várias vantagens
---
class: center, middle
# Previnem o abuso de setState()
#### em favor da utilizacao de props
---
class: left, middle
#### Encorajam o padrão
# "smart" vs "dumb" components
---
class: center, middle
### Encorajam código
# reutilizável e modular
---
class: right, middle
#Desencorajam complexidade
#### evitando componentes gigantes, complicados, e que fazem demais
---
class: middle, inverse
```
const Welcome = props => (<h1>Hello, {props.name}</h1>)

const App = () => (
  <div>
    <Welcome name="André" />
    <Welcome name="Matheus" />
    <Welcome name="Gunar" />
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```
.footnote[[Codepen](http://codepen.io/gunar/pen/vmJLJL)]
---
class: center, middle, inverse
# Higher Order Components
---
class: left, middle, inverse
####Compõem componentes
#usando componentes
???
- React
- Por exemplo, um componente `<Blog>` pode ser composto de vários `<Post>`.
---
class: right, middle, inverse
####Compõem componentes
#usando funções
---
class: center, middle
# Higher Order Components
.hidden[
# Higher Order Functions
]
???
- HoC trabalham com outra unidade de composição.
- HoC sao funcoes que recebem um componente base e retornam um componente com funcionalidade adicional.
- Enhancers (dar um upgrade)
- HoC podem ser utilizados para abstrair tarefas comuns em pedacos reutilizáveis.
---
class: center, middle
.linethrought[
# Higher Order Components
]
# Higher Order Functions
???
- "a function which takes in a function parameter or returns a function”
- Because React components are really just functions, higher order components are in fact just higher order functions.
---
class: center, middle, inverse
# Manipulando Props
[CodePen](https://codepen.io/gunar/pen/wdPogr?editors=0010)
???
- Manupulando Props
---
class: right, middle
# Composição
[CodePen](https://codepen.io/gunar/pen/oWMZeb?editors=0010)
---
class: middle
#Recompose
[Docs](https://github.com/acdlite/recompose/blob/master/docs/API.md#branch)
---
class: right, middle
# Unit testing
???
- [Unit testing React components without a DOM](https://simonsmith.io/unit-testing-react-components-without-a-dom/)
- [Enzyme](http://airbnb.io/enzyme/docs/guides/tape-ava.html)
- HoCs necessitam Componentes Puros
- HoC permite testar o comportamento do componente e do HoC separadatamente
---
class: center, middle, inverse
# Invisible Technologies, Inc.
http://invisible.email/go
???
- React-redux uses HOC
- Radium uses HOC
- compose() multiple hoc
- examples in http://blog.scottlogic.com/2016/09/20/the-power-of-the-higher-order.html
---
class: right
# Further reading

### [Use of Recompose in Universal React Apollo Example](https://medium.com/welikegraphql/use-of-recompose-in-universal-react-apollo-example-3d1f89bc945b)
![QRCode](https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fmedium.com%2Fwelikegraphql%2Fuse-of-recompose-in-universal-react-apollo-example-3d1f89bc945b&chs=180x180&choe=UTF-8&chld=L|2)

### [Why The Hipsters Recompose Everything](https://medium.com/javascript-inside/why-the-hipsters-recompose-everything-23ac08748198)
![QRCode](https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fmedium.com%2Fjavascript-inside%2Fwhy-the-hipsters-recompose-everything-23ac08748198&chs=180x180&choe=UTF-8&chld=L|2)