Title

name: inverse
layout: true
class: center, middle, inverse
---

# React Hooks
### What's all the fuss about?

.footnote[
  created with [remark](https://github.com/gnab/remark) by @denishowlett
]
      
---
layout: false
.left-column[
  ## What are they?
]
.right-column[
  A new feature proposal from Facebook

Allows *functional components* to have state.red[*]

.footnote[.red[*]And this will change everything...]
]
---
.left-column[
  ## What are they?
  ## Why?
]
.right-column[
  Hooks will simplify development as we won't need to use classes

- Simpler, shorter, easier to understand.red[*] code,

- Removes the need for higher-order components

- Promotes reusability by creating custom hooks really easily

- Will probably replace Redux (I think)
.footnote[.red[*]well...]
]
---
template: inverse

## How do they work, then?
---

# Let's look at a simple ToDo app

```jsx
import React, { Component } from 'react';
import './App.css';
import TodoList from './TodoList';

class App extends Component {

render() {
    return (
      <div className="App">
        <header className="App-header">
        To Do List
        </header>
        <TodoList/>
      </div>
    );
  }
}

export default App;
```
---
# Here's the ToDo component
```jsx
import React, { Component } from "react";
import TodoItem from "./TodoItem";
import AddTodoForm from "./AddTodoForm";

class TodoList extends Component {

render() {
    return (
      <div className="todoListMain">
        {this.state.items.map((item, index) => (
          <TodoItem key={index} item={item} />
        ))}
        <AddTodoForm addItem={this.addItem}/>
      </div>
    );
  }
}

export default TodoList;
```
---
# We need state to store the items
```jsx
class TodoList extends Component {
  constructor() {
    super();

this.state = {
      items: []
    };
  }
  ...
```
---
# Now we need functionality
```jsx
class TodoList extends Component {
  constructor() {
    super();

this.state = {
      items: []
    };
  }

addItem = (newItem) => {
    this.setState({ items: [...this.state.items, newItem] });
  };

class AddTodoForm extends Component {
  constructor() {
    super();

this.state = { newItem: "" };
  }

onChangeNewItem = event => {
    this.setState({ newItem: event.target.value });
  };

onClick = () => {
    this.props.addItem(this.state.newItem);
  };

render() {
    return (
      <div className="newTodo">
        <input placeholder="Task"
          value={this.state.newItem}
          onChange={this.onChangeNewItem}
        />
        <button type="submit" onClick={this.onClick}>Add To Do</button>
      </div>
    );
  }
}

export default AddTodoForm;
```
---
template: inverse

## Introducing .highlight[**useState**]

---
## useState returns two things: 
  - a variable holding the current value
  - a setter for changing it

and it takes the initial value as a parameter

```jsx
import React, { useState } from "react";
import TodoItem from "./TodoItem";
import AddTodoForm from "./AddTodoFormWithHooks";

const TodoList = () => {
  const [items, setItems] = useState([]);

const addNewItem = (newItem) => {
    setItems([...items, newItem]);
  };

return (
    <div className="todoListMain">
    {items.map((item, index) => (
        <TodoItem key={index} item={item} />
      ))}
      <AddTodoForm addItem={addNewItem}/>
    </div>
  );
};

export default TodoList;
```
---
# And here's the TodoForm with Hooks
```jsx
import React, { useState } from "react";

const AddTodoForm = ({addItem}) => {
  const [newItem, setItem] = useState("");

const onChangeNewItem = event => {
    setItem(event.target.value);
  };

const onClick = () => {
    addItem(newItem);
  };

return (
    <div className="newTodo">
      <input
          placeholder="Task"
          value={newItem}
          onChange={onChangeNewItem}
      />
      <button type="submit" onClick={onClick}>Add To Do</button>
    </div>
  );
};

export default AddTodoForm;
```
---
# useState has some interesting features

- you can use it several times in the same function

```jsx
function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}
```

- it's just a pattern, so you can create your own

But remember `useState` is just for local state, it doesn't solve the problem of global state.

Have a look at `reactn`

---
template: inverse

## Other hooks
---
layout: false
.left-column[
  ## useEffect
]
.right-column[
## Replaces componentDidMount

In your function, you can call `useEffect` and give it a method to call when the component was 
mounted or updated (which saves duplicate code).

You can also pass function as a second parameter to be called when it's unmounted so you can tidy up.
]

---
layout: false
.left-column[
  ## useEffect
  ## useContext
]
.right-column[
## Let's you subscribe to the React context

This will replace all those higher order wrapping components like `withTheme` or `withProvider`. Instead:
```jsx
function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}
```
]

---
layout: false
.left-column[
  ## useEffect
  ## useContext
  ## useReducer
]
.right-column[
## An alternative to `useState`

Uses the same pattern as in Redux
```jsx
const [state, dispatch] = useReducer(reducer, initialState);
```
Accepts a reducer of type `(state, action) => newState`

This is a better fit for multiple actions (e.g. add and remove items from our Todo list): 
```jsx
const [items, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'add':
      // ... same as before ...
    case 'remove':
      // keep every item except the one we want to remove
      return state.filter((item) => item != action.item);
    default:
      return state;
  }
}, []);
```

Again, this only covers local state currently...
]

---
layout: false
.left-column[
  ## useEffect
  ## useContext
  ## useReducer
  ## loads more...
]
.right-column[
Including

- `useCallback`

- `useMemo`

- `useRef`

- `useImperativeMethods`

- `useLayoutEffect` 
]
---
template: inverse

## So... expect all the big libraries to change to support hooks as soon as they're official
---
# Resources
  - https://reactjs.org/docs/hooks-overview.html

- https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

- https://www.youtube.com/watch?v=wXLf18DsV-I (Deep dive by Ryan Florence)

- https://github.com/CharlesStover/reactn#readme (Global state management)

.footnote[@denishowlett]