donavon/hook-flow donavon/hook-flow

  • Stars
    star
    2,157
  • Rank 21,378 (Top 0.5 %)
  • Language
    Shell
  • License
    MIT License
  • Created over 5 years ago
  • Updated about 2 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
donavon/hook-flow
github

donavon

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf

hook-flow

All Contributors

React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events. For more information, see the official React Hooks API Reference.

Here is a flow diagram that explains the new flow of a Hooks component.

Flow Diagram

This flow diagram is also available as a PDF file.

flow chart

Open in browser

To quickly open the Hook Flow Diagram in your default browser, you can execute the following from your terminal. Commit this to memory! πŸ˜‰

$ npx hook-flow

License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):

Donavon West
Donavon West
πŸ€” πŸš‡ 🚧 πŸ‘€ πŸ’» 🎨		 Revel Carlberg West
Revel Carlberg West
πŸ€” 🎨		 Dan Abramov
Dan Abramov
πŸ€” 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!

More Repositories

1

use-persisted-state

A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
JavaScript
1,378
star
2

use-dark-mode

A custom React Hook to help you implement a "dark mode" component.
JavaScript
1,288
star
3

use-event-listener

A custom React Hook that provides a declarative useEventListener
JavaScript
356
star
4

thwack

A tiny modern data fetching solution
JavaScript
269
star
5

undefined-is-a-function

"undefined is not a function"? β€” It is now!
JavaScript
241
star
6

use-interval

A custom React Hook that provides a declarative setInterval called useInterval.
TypeScript
161
star
7

react-af

Allows you to code using certain React.next features today! Perfect for component library maintainers.
JavaScript
138
star
8

styled-shortcuts

Provides convenient props shortcut helper for Styled Components πŸ’…
JavaScript
88
star
9

superjson-remix

TypeScript
84
star
10

render-props

Easily and reliably support Render Props, Component Injection, and Function as a Child
JavaScript
83
star
11

use-firebase-auth

A custom React Hook that provides a declarative interface for Firebase Auth.
JavaScript
78
star
12

remix-etag

HTML
70
star
13

use-instance

A custom React Hook that provides a sensible alternative to useRef for storing instance variables.
TypeScript
38
star
14

use-visibility-change

Know how long it's been since a user has "seen" your app.
TypeScript
33
star
15

big-sur-icons

A collection of re-imagined icons for popular apps in the macOS Big Sir style
24
star
16

reclass

Write React stateful components without worrying about this or binding methods.
JavaScript
24
star
17

transformer-open-graph

TypeScript
23
star
18

splashr

A React component that takes the effort out of adding a Splash Screen to your web application.
JavaScript
21
star
19

react-router-relative-link

Allows react-router's Link component to accept relative paths.
JavaScript
19
star
20

use-firebase-app

JavaScript
17
star
21

json_

Converts camelCase JavaScript objects to JSON snake_case and vise versa.
TypeScript
17
star
22

use-prev-prop

A custom React Hook that maintains a previous value for a prop (or any other value).
JavaScript
16
star
23

lambdog-server

Write Netlify functions without pulling your hair out.
JavaScript
15
star
24

use-firebase-database

JavaScript
14
star
25

styled-units

You might want to try https://github.com/donavon/styled-shortcuts instead
JavaScript
14
star
26

styled-shortcut-components

A convenience package that wraps styled-components with styled-shortcuts.
JavaScript
13
star
27

init-readme

An opinionated README.md generator for npm utility packages
JavaScript
12
star
28

garage-door

JavaScript
12
star
29

hrd

An npx utility to make it easy to hoard, um… reserve an npm name.
Shell
10
star
30

use-pdf

TypeScript
9
star
31

intl-parse-accept-language

TypeScript
8
star
32

lloop

A React JSX Loop component with the lloopy name
JavaScript
6
star
33

xcop

An XHR Cross Origin Proxy
JavaScript
5
star
34

react-proxy-hook

Helps you test a React Hook
JavaScript
5
star
35

use-cached-state

JavaScript
5
star
36

binclock

A binary clock written in React using TypeScript
TypeScript
4
star
37

remix-patches

4
star
38

donavon

3
star
39

react-extended-render

Extends React's `Component` by passing `props`, `state`, and `context` to the `render` method of a class.
JavaScript
3
star
40

render-fragment

JavaScript
3
star
41

consoleit

Utility to append console messages to the DOM. Useful when using RequireBin, JSFiddle, or the like.
JavaScript
3
star
42

Star-Wars-Episode-I-The-Phantom-Menace

Script for "Star Wars: Episode I – The Phantom Menace" entirely using git commit messages. Like it? Give it a ⭐️ on GitHub.
3
star
43

use-step-multi-step-form-demo

Created with CodeSandbox
JavaScript
3
star
44

crapp-ts

An npx utility to run create-react-app with the TypeScript template.
Shell
3
star
45

animated-placeholder

JavaScript
2
star
46

lambdog-client

JavaScript
2
star
47

spreadlove.io

HTML
2
star
48

react-wobbly-spinner

A Wobbly Spinner Component for React
JavaScript
2
star
49

multi-cookie-session

TypeScript
2
star
50

chime-devices

This package contains a React context provider and a hook around AWS Chime for capturing system audio and video devices.
TypeScript
1
star
51

build-uri-path

Reliably build a Uri path
JavaScript
1
star
52

resume

1
star
53

prevent-default

A wrapper that calls `event.preventDefault()` for you.
JavaScript
1
star
54

render-array

JavaScript
1
star
55

netlify-faunadb-example

JavaScript
1
star
56

thwack-resolve

A tiny functional equivalent to` new URL(url, base).href`
TypeScript
1
star
57

babel-plugin-transform-class-private-properties

A Babel transform to convert pseudo-private "underscore convention" private class properties to truly private properties.
1
star