Scribd
Upload
103 views45 pages

React Hooks Guided Tour

The document discusses React Hooks, which are a new addition in React 16.8 that allow using state and other React features without writing a class. It provides an overview of what hooks are, how they work, and how to use them. Key points covered include common hook useEffect for lifecycle methods, rules for using hooks, and resources for learning more.

Uploaded by

asdafsrerafdasdasdasassad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
103 views45 pages

React Hooks Guided Tour

The document discusses React Hooks, which are a new addition in React 16.8 that allow using state and other React features without writing a class. It provides an overview of what hooks are, how they work, and how to use them. Key points covered include common hook useEffect for lifecycle methods, rules for using hooks, and resources for learning more.

Uploaded by

asdafsrerafdasdasdasassad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

React Hoo k s

a guided tour
Dave
daveceddia.com
@dceddia
React Conf 2018
🤔
Hooks Week™
🤦
React Hoo k s
a guided tour
What are Hooks?

How do they work?

How can I use them?


⚠ 🚨 🏗
Hooks are a proposal.
Hooks are in alpha.
Hooks could still change.
➕
Hooks are additive.
They don’t replace classes.
📚
Check out the RFC:
https://github.com/reactjs/rfcs/pull/68

https://reactjs.org/hooks
How does that even work?
hooks
hooks

0
hooks

0
1
hooks

1
hooks
hooks

13
hooks

13

8
hooks

14

8
Rules of Hooks
1. Call order must be stable
No loops, conditionals, nested functions.

2. Only call from function components


…or custom hooks. Sorry, classes.

3. Names should start with “use”


Help the linter out.
useEffect:
componentDidMount
+
componentDidUpdate
+
componentWillUnmount
More Hooks…
useMemo - memoize expensive computations
useCallback - memoize callbacks
useRef - create refs to DOM nodes
useImperativeMethods
useLayoutEffect
useMutationEffect
Try Them Yourself!
In Your Own Project:

On CodeSandBox:
https://codesandbox.io/s/rxpp65kyn
Resources
Official Docs
https://reactjs.org/hooks

Hooks Week!
https://daveceddia.com/hooks

Nik Graf’s Collection of React Hooks


https://nikgraf.github.io/react-hooks/

Gabe Ragland’s useHooks - new hook every day


https://usehooks.com/
Thanks!
Examples and slides:
https://daveceddia.com/hooks-boston

@dceddia

daveceddia.com

You might also like