React Hooks - Advantages and use cases.

1. Oleksandr Oleksiv
Frontend developer

2. React Hooks

3. What are React Hooks?
React Hooks are functions that allow to “power up” your
functional components with class-only features (e.g. state,
lifecycle hooks, etc.)

4. Functional Class-based
Great for presentation
Properties as input, JSX as output
Single purpose focus Components orchestration
Work with props and state
Hold the business logic

5. Problems
Wrapper hell
Extending components with new functionality
Lifecycle hooks

6. Components with Hooks
Easier to maintain
Flexible
Easier to manage lifecycle hooks
Less code

7. useState(...)

8. WStateful component
without React hooks

9. WStateful component
with useState(...) hook

10. WUse multiple
properties in single
useState(...) hook

11. useEffect(...)

12. WStateful component
with lifecycle hooks

13. The same component,
but with useEffect(...)
hook

14. useContext(...)

15. Provider provides
the context in a
wrapper
component...

16. ...and context can be
consumed inside child
components via
useContext(...) hook,
instead of using
Context.Consumer
wrapper

17. useMemo(...)

18. useMemo(...) is an alternative
to traditional
shouldcomponentUpdate
lifecycle hook. In this case it
makes sure that <TodoList/>
component re-renders only if
It’s input changes

19. Rules of Hooks
All hooks should be used at top level
Hook’s can’t be declared conditionally
Use hooks ONLY inside functional components and custom hooks
The order matters

20. THANK YOU

21. Contact me
Oleksandr.Oleksiv
@scalac.io
github.com/OleksivO