React: Hooks - 401-advanced-javascript-jv/seattle-javascript-401d30 GitHub Wiki

React Hooks are the way that function-based React components can use state variables, or to access context. They also allow a significant amount of extensibility in the form of custom hooks, which allow you to define your own modular functions to be used in multiple components.

Common types of hooks:

  • useState - a hook which allows a functional component to use state
  • useContext - a hook which allows a functional component to access the context of a component
  • useEffect - a hook which combines the class-based methods componentDidMount, componentDidUpdate, and componentWillUnmount

Hook Rules

  • Only call hooks at the top level, and not inside loops, conditionals, etc. Conditional logic should be inside the hook itself or in a wrapper around the component.
  • Do not call hooks from anywhere but inside a function-based React component.