Welcome to the
Custom React Hooks
Presented by Tommy Marshall
-
What and why
-
Live coding
-
How they work
-
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