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)

  1. functions that let you “hook into” React state and lifecycle features from function components.
  2. 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.)
  3. Hooks are don't contain breaking changes, can be used alongside redux, mobx, etc
  4. Are opt-in
  5. built-in Hooks like:
    1. useState
    2. useEffect
    3. useContext
  6. custom hooks you write and publish

What is a hook?

Current Support

  1. in beta for a few years
  2. released react 16.8
  3. current react is 16.9
  4. if you upgrade also upgrade all packages, react-dom etc
  5. 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>
  );
}

Gotcha's

  1. can only be used in function components not class components 

 

 

DEMO's

  1. basic project https://github.com/berzerk-interactive/basic-react-hooks
  2. published hook project https://github.com/berzerk-interactive/use-cat-api

BERZERK

seminars

conferences

training

consulting

projects

https://www.linkedin.com/company/berzerk-io/

https://www.facebook.com/berzerk.interactive/

www.berzerk.io

https://github.com/berzerk-interactive

LEE BLAZEK

SME Javascript, Angular, React, Vue, NodeJS, all things in the browser

 

https://www.linkedin.com/in/leeblazek/

Made with Slides.com