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

Introducing Hooks

Avatar for Jake Worth 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.

Avatar for Jake Worth

Jake Worth

November 28, 2018
Tweet

More Decks by Jake Worth

Other Decks in Technology

Transcript

  1. 4

  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. import React, { useEffect, useState } from 'react'; const FunctionalComponentWithEffectHook

    = () => { const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`); }); // render the button }; 21
  15. 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
  16. 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