Reading 31 Hook API - liz-kavalski-401-advanced-javascript/seattle-javascript-401n13 GitHub Wiki

Hooks at a Glance

  • useState returns a pair: the current state value and a function that lets you update it.
  • Can call the function from an event handler or somewhere else.
  • Hooks are functions that let you “hook into” React state and lifecycle features from function components.
    • Hooks don't work in classes.
    • There some built-in hooks in React.
  • Effect operations are data fetching, subscriptions, or manually changing the DOM from React components.
  • useEffect dose the same things as componentDidMount, componentDidUpdate, and componentWillUnmount but unified into a single API.
  • When React runs the “effect” function after flushing changes to the DOM.
  • How dose it "clean up"
  • Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
  • Only call Hooks from React function components.
  • Building a hook can be useful if wanting to reuse some stateful logic between components.
  • useContext lets you subscribe to React context without introducing nesting.
  • useReducer lets you manage local state of complex components with a reducer:

Using the Effect Hook

  • The Effect hook tells react that your component needs to do something after render.
  • I still don't get 'clean-up'