Welcome to the

Custom React Hooks

Presented by Tommy Marshall

  1. What and why

  2. Live coding

  3. How they work

  4. Q/A

Experimental Feature

1

What and why

WHAT

A way to hook (sorry) into React lifecycle methods and have state without the use of a Class.

We want to ensure separation of concerns.
Decouple things. Do more with less. DRY.

 

Data Layer (HOC) and the Presentation (Component)

DRAWBACK REASON 1

Duplicated logic between different components and lifecycle methods.

DRAWBACK REASON 2

Complex patterns like render props and higher-order components. 

2

Live coding

3

How they work

Hooks tell React that your component
needs to do something after it renders.

 

React will render the component then keep track of the what functions (useEffect's) were called.

 

When re-rendering, it will call it after performing the DOM updates.

That’s all

medallia.com/careers

5

Questions?

LINKS

  • https://reactjs.org/docs/hooks-intro.html
  • https://usehooks.com
  • https://github.com/streamich/react-use
  • https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

React Hooks

By Tommy Marshall

React Hooks

  • 1,688