Hooks

Piero Divasto

Lead Consultant

ThoughtWorks

https://www.youtube.com/watch?v=dpw9EHDh2bM

Issues

Code reusing

Huge components

Classes are complex

Issues

Code reusing - Patterns

High-order components

Issues

Code reusing - Patterns

Render props

Issues

Code reusing

Wrapping Hell!

Issues

Huge components & Complex classes

Similar code spare in different places (lifecycle methods)

Hard to understand

Classes impact performance

Too much boilerplate, binding, etc.

React doesn't provide a stateful primitive simpler than class component

Hooks

Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

Hooks

Hooks

Hooks

Built-in Hooks

  • Basic Hooks
    • useState
    • useEffect
    • useContext
  • Additional Hooks

    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeMethods
    • useMutationEffect
    • useLayoutEffect

Demo

Rules

Only Call Hooks at the Top Level

Don’t call Hooks from regular JavaScript functions

Use set (handler) and use (hook's name) suffix (convention)

Why?: https://reactjs.org/docs/hooks-rules.html

Rules

Why?: https://reactjs.org/docs/hooks-rules.html

Benefits

Less boilerplate

We don't need to use class-based components

Improve code reuse

Decrease complexity

Improve Separation of Concern

Benefits

Fuente: https://bit.ly/2r4JXFc

Benefits

Fuente: https://bit.ly/2Q4e3HW

Thank you!

http://github.com/morph3o

https://medium.com/@pierodivasto

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

Bibliography

https://reactjs.org/docs/hooks-overview.html

https://reactjs.org/docs/hooks-state.html

https://reactjs.org/docs/hooks-effect.html

https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

https://www.youtube.com/watch?v=dpw9EHDh2bM

https://github.com/reactjs/rfcs/pull/68

https://github.com/reactjs/rfcs/blob/master/text/0068-react-hooks.md

Hooks - English

By Piero Divasto

Hooks - English

Presentation about hooks proposal by React team.

  • 707