Tweet
Tweet

Slide 1

Slide 1 text

Introducing Hooks Jake Worth 1

Slide 2

Slide 2 text

@jwworth Hashrocket 2

Slide 3

Slide 3 text

Agenda 1. What are hooks? 2. API Tour 3. Practical example 3

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

1. What are hooks? 5

Slide 6

Slide 6 text

What are hooks? » A new feature(!) described by an open RFC1 and currently part of the React v16.7.0-alpha » 'Hook into' core features of React » A primitive for sharing stateful logic without writing a class 1 https://github.com/reactjs/rfcs/pull/68 6

Slide 7

Slide 7 text

What are hooks? » Completely opt-in » 100% backwards-compatible » There are no plans to remove classes from React "Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know..."2 2 https://reactjs.org/docs/hooks-intro.html 7

Slide 8

Slide 8 text

2. API Tour 8

Slide 9

Slide 9 text

API Tour Code examples: https://codesandbox.io/s/z35k2jmz6x 9

Slide 10

Slide 10 text

class ClassComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return (

You clicked {this.state.count} times

this.setState({ count: this.state.count + 1 })}> Click me
); } } 10

Slide 11

Slide 11 text

import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 11

Slide 12

Slide 12 text

import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 12

Slide 13

Slide 13 text

import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 13

Slide 14

Slide 14 text

import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 14

Slide 15

Slide 15 text

import React, { useState } from 'react'; const FunctionalComponentWithStateHook = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 15

Slide 16

Slide 16 text

const DumbComponent = () => { return (

I am dumb

); }; 16

Slide 17

Slide 17 text

class NotSoDumbComponent extends React.Component { state = { count: 0 }; render() { return (

You clicked {this.state.count} times

this.setState({ count: this.state.count + 1 })}> Click me
); } } 17

Slide 18

Slide 18 text

import React, { useState } from 'react'; const NotSoDumbComponent = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 18

Slide 19

Slide 19 text

import React, { useState } from 'react'; const DumbComponent = () => { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }; 19

Slide 20

Slide 20 text

class ClassComponentWithSideEffects extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { console.log(`You clicked ${this.state.count} times`); } componentDidUpdate() { console.log(`You clicked ${this.state.count} times`); } // render the button } 20

Slide 21

Slide 21 text

import React, { useEffect, useState } from 'react'; const FunctionalComponentWithEffectHook = () => { const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`); }); // render the button }; 21

Slide 22

Slide 22 text

3. Practical Example 22

Slide 23

Slide 23 text

Practical Example » https://github.com/jwworth/conway/pull/2 const App = () => { const [days, setDays] = useState(0); const [randomness, setRandomness] = useState(RANDOMNESS); const [sideLength, setSideLength] = useState(SIDELENGTH); const [world, setWorld] = useState(randomWorld(SIDELENGTH, RANDOMNESS)); ... } 23

Slide 24

Slide 24 text

Conclusion 24

Slide 25

Slide 25 text

Thanks! @jwworth 25

Slide 26

Slide 26 text

Links » Introducing Hooks: https://reactjs.org/docs/hooks-intro.html » Motivation: https://reactjs.org/docs/hooks-intro.html#motivation » RFC: https://github.com/reactjs/rfcs/pull/68 » Recipes: https://usehooks.com » Slides: https://speakerdeck.com/jwworth » Code Sandbox: https://codesandbox.io/s/z35k2jmz6x » Refactoring example (Conway): https://github.com/jwworth/conway/pull/2 » Refactoring example (Equality Table): https://github.com/jwworth/javascript-equality/ pull/1 » Photos: darkroomsg and Brook Anderson Unsplash 26