React Hooks

Up and running

Lee Blazek

Today!

About Me
- What is a hook?
- Current support
- What can it replace?
- Basic usage

Demo project

About Me

React, Angular, JS, Mean Stack, Front-end, Node api's, with a side of iOS

SME Javascript

Started development in 2003 ~ 17 years

Full-stack JS since 2013 ~ 7 years

Since Angular v 0.8

node 0.x

What about you?

Please city, country, and a short description of your job/career/level in chat.

(sorry there's to many people to go thru all in call)

functions that let you “hook into” React state and lifecycle features from function components.
Hooks don’t work inside classes — they let you use React without classes. (We don’t recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you’d like.)
Hooks are don't contain breaking changes, can be used alongside redux, mobx, etc
Are opt-in
built-in Hooks like:
1. useState
2. useEffect
3. useContext
custom hooks you write and publish

What is a hook?

Current Support

in beta for a few years
released react 16.8
current react is 16.9
if you upgrade also upgrade all packages, react-dom etc
React Native since 0.59

Basic useState Usage

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Basic useEffect Usage

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}