React hook is a new feature that enables us to use state and others react functionalities without writing class.

1. Re c ok y h e

2. @dielduarte

4. What kind of problems do hooks solve?
Reusing logic
Huge components
Confusing classes

6. How we were solving these
problems before hooks?

7. Higher order components
Concretely, a higher-order component is a function that takes a component and returns a new component.

8. withFetch()
https://codesandbox.io/s/548k5w71xx

9. Render props
A component with a render prop takes a function that returns a React element and calls it instead of
implementing its own render logic.

11. <Fetch />
https://codesandbox.io/s/8xqn3kj2l

12. {this.props.children()}

15. Reusing logic
Huge components
Confusing classes

16. recompose
Recompose is a React utility belt for function components and higher-order components
https://codesandbox.io/s/yqy23w3nmj

17. A Note from the Author (acdlite, Oct 25 2018):
Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a
proposal for Hooks. Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of
that. I will be discontinuing active maintenance of this package (excluding perhaps bugfixes or patches for compatibility with
future React releases), and recommending that people use Hooks instead. Your existing code with Recompose will still work, just
don't expect any new features. Thank you so, so much to @wuct and @istarkov for their heroic work maintaining Recompose
over the last few years.
Read more discussion about this decision here.

20. What kind of problems do hooks solve?
Reusing logic
Huge components
Confusing classes
Wrapper hell

21. Hooks
Hooks are an upcoming feature that lets you use state and other React features without writing a class

22. Basic Hooks
➔ useState
➔ useEffect
➔ useContext
Additional Hooks
➔ useReducer
➔ useCallback
➔ useMemo
➔ useRef
➔ useImperativeHandle
➔ useLayoutEffect
➔ useDebugValue

23. const [value, fn] => useState()
https://codesandbox.io/s/l20l00nqz7

27. useEffect(() => fn(), array)
https://codesandbox.io/s/9zp9nvxkzr

28. useEffect()
It’s executed after all renders
if returns a function, that function is called in the
unmount time
can receive an array as a second param, and
when with that, the effect is just called after the
first render if the values passed changed. Also, if
passed an empty array, the effect will be called
just one time.

29. useEffect()
can be used to replace componentDidMount,
componentDidUpdate and
componentWillUnMount
if you are working with visual DOM
manipulations, use useLayoutEffect instead,
useLayoutEffect runs synchronously before the
paint process of the browser

31. const context = useContext(contextObj)
https://codesandbox.io/s/zn1ml0o4m4

33. Custom Hooks
Custom Hooks lets you extract component logic into reusable functions.

34. useFetch()
https://codesandbox.io/s/mjk67z3z29

35. <Counter />
https://codesandbox.io/s/mkz1lq66y

39. https://usehooks.com

40. Rules of
Hooks

41. Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions

42. Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions.

43. npm install eslint-plugin-react-hooks@next

44. How hooks works?
super high level explanation

45. First render
0 value 1 value 2 value
useState() useEffect() useContext()

46. Next render
0 value 1 value 2 value
useState() useContext()

47. Write components with
class, high order
components and
render props
Write components with
hooks

48. Questions?