Resources for React Hooks. Includes Example Trivia App.
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Initial commit Nov 28, 2018
src Added Web Accessibility Quiz Nov 30, 2018
.gitignore Initial commit Nov 28, 2018
.prettierrc Initial commit Nov 28, 2018
LICENSE Initial commit Nov 28, 2018
README.md Initial commit Nov 28, 2018
hooks-cheatsheat.md Initial commit Nov 28, 2018
package.json Initial commit Nov 28, 2018
screenshot.png Initial commit Nov 28, 2018
tsconfig.json Initial commit Nov 28, 2018
tslint.json Initial commit Nov 28, 2018
webpack.config.js Initial commit Nov 28, 2018
yarn.lock Initial commit Nov 28, 2018

README.md

Triangle ReactJS Meetup - React Hooks

The purpose of this project is to demonstrate the difference between using Hooks (current in v16.7.0-alpha) and class components. This is not meant to be a production-ready project and should be treated as such. Hooks are still very much in alpha. Use at your own risk.

Slides

Slides for the presentaion are available here: Google Slides

Cheat Sheet

View Cheat Sheat

Triva App

Scripts

Start - starts webpack-dev-server

yarn start

LOC Differences

File LOC w/o Hooks LOC w/ Hooks Difference
App.tsx 42 29 13
Quiz.tsx 90 69 21

Some Takeaways

  • Using hooks for the most part felt much easier and faster than implementing a class component.
  • Using hooks for the interval (countdown) was actually more of a pain with hooks than a class.