Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing Hooks

A9689bb4f705b8bede56deddf66c87ef?s=47 Jake Worth
November 28, 2018

Introducing Hooks

Hooks are a new feature proposal currently in React v16.7.0-alpha. But what are they? What problem are they trying to solve? How might they affect my code?

This talk answers these questions, toward a clear understanding of this new tool and the potential benefits it may provide.

A9689bb4f705b8bede56deddf66c87ef?s=128

Jake Worth

November 28, 2018
Tweet

Transcript

  1. Introducing Hooks Jake Worth 1

  2. @jwworth Hashrocket 2

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

    example 3
  4. 4

  5. 1. What are hooks? 5

  6. 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
  7. 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
  8. 2. API Tour 8

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

  10. class ClassComponent extends React.Component { constructor(props) { super(props); this.state =

    { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } 10
  11. import React, { useState } from 'react'; const FunctionalComponentWithStateHook =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 11
  12. import React, { useState } from 'react'; const FunctionalComponentWithStateHook =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 12
  13. import React, { useState } from 'react'; const FunctionalComponentWithStateHook =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 13
  14. import React, { useState } from 'react'; const FunctionalComponentWithStateHook =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 14
  15. import React, { useState } from 'react'; const FunctionalComponentWithStateHook =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 15
  16. const DumbComponent = () => { return ( <div> <p>I

    am dumb</p> </div> ); }; 16
  17. class NotSoDumbComponent extends React.Component { state = { count: 0

    }; render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } 17
  18. import React, { useState } from 'react'; const NotSoDumbComponent =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 18
  19. import React, { useState } from 'react'; const DumbComponent =

    () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; 19
  20. 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
  21. import React, { useEffect, useState } from 'react'; const FunctionalComponentWithEffectHook

    = () => { const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`); }); // render the button }; 21
  22. 3. Practical Example 22

  23. 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
  24. Conclusion 24

  25. Thanks! @jwworth 25

  26. 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