Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Hooks in iOS App Development - CA.swift #14

Using Hooks in iOS App Development - CA.swift #14

Using Hooks in iOS App Development - CA.swift #14

Takuma Osada

May 19, 2021
Tweet

More Decks by Takuma Osada

Other Decks in Technology

Transcript



  1. Using Hooks in iOS App Development
    CA.swift #14

    View full-size slide



  2. Introduction
    ・Takuma Osada
    ・CyberAgent 21 New Grad
    ・GitHub: @ostk0069
    ・Twitter: @ostk0069

    View full-size slide



  3. Agenda
    1. Simple Conclusion
    2. What’s Hooks?
    3. Introduction of Hooks API
    4. Advantages & Drawbacks
    5. Final Conclusion

    View full-size slide



  4. Agenda
    🙅 Deep Look in SwiftUI-Hooks Codes

    View full-size slide



  5. Simple Conclusion

    View full-size slide



  6. Simple Conclusion
    Not 👎
    but also not 😆

    View full-size slide



  7. Simple Conclusion
    This is just my opinion 😓

    View full-size slide



  8. What’s Hooks?

    View full-size slide



  9. What’s Hooks?
    Hooks are a new addition in React 16.8. (Feb 2019)
    They let you use state and other
    React features without writing a class.
    React Hooks API Reference

    View full-size slide



  10. What’s Hooks?
    YouTube: React Today and Tomorrow and 90% Cleaner with React Hooks
    🔥 Wrapper Hell
    📦 Huge Components
    😓 Confusing Classes
    Hooks Solves...

    View full-size slide



  11. What’s Hooks?
    SwiftUI-Hooks
    Released 0.0.1 by ra1028 (May 2021)
    ra1028/SwiftUI-Hooks

    View full-size slide



  12. What’s Hooks?
    Hooks also used in Flutter as well
    rrousselGit/flutter_hooks

    View full-size slide



  13. Introduction of Hooks API

    View full-size slide



  14. Introduction of Hooks API
    ・useState
    ・useEffect
    ・useLayoutEffect
    ・useMemo
    ・useRef
    ・useReducer
    ・useEnvironment
    ・usePublisher
    ・usePublisherSubscribe
    ・useContext

    View full-size slide



  15. Introduction of Hooks API
    ・useState
    ・useEffect
    ・useLayoutEffect
    ・useMemo
    ・useRef
    ・useReducer
    ・useEnvironment
    ・usePublisher
    ・usePublisherSubscribe
    ・useContext

    View full-size slide



  16. Introduction of Hooks API
    useState
    A hook to use a Binding wrapping current state to be updated
    by setting a new state to wrappedValue.
    Triggers a view update when the state has been changed.

    View full-size slide



  17. Introduction of Hooks API
    useState
    SwiftUI + Hooks SwiftUI

    View full-size slide



  18. Introduction of Hooks API
    useEffect
    A hook to use a side effect function that is called the number of times
    according to the strategy specified by computation.
    Optionally the function can be cancelled when this hook is unmount
    from the view tree or when the side-effect function is called again.
    Note that the execution is deferred until after all the hooks have been
    evaluated.

    View full-size slide



  19. Introduction of Hooks API
    useEffect
    SwiftUI
    SwiftUI + Hooks

    View full-size slide



  20. Introduction of Hooks API
    useRef
    A hook to use a mutable ref object storing an arbitrary value.
    The essential of this hook is that setting a value to current
    doesn't trigger a view update.

    View full-size slide



  21. Introduction of Hooks API
    useRef
    SwiftUI + Hooks SwiftUI

    View full-size slide



  22. Introduction of Hooks API
    usePublisher
    A hook to use the most recent status of asynchronous
    operation of the passed publisher.
    The publisher will be subscribed at the first computation
    and will be re-subscribed according to the strategy specified with the
    passed computation.
    Triggers a view update when the asynchronous status has been changed.

    View full-size slide



  23. Introduction of Hooks API
    usePublisher
    SwiftUI + Hooks SwiftUI

    View full-size slide



  24. Advantages & Drawbacks

    View full-size slide



  25. Advantages & Drawbacks
    Advantages
    ✔ Less Codes, Less Classes & Struct
    ✔ Linter works on Top Level Codings
    ✔ Enable to use Minimum & Partial

    View full-size slide



  26. Advantages & Drawbacks
    Drawbacks
    ✖ Very few Documents & Samples
    ✖ More cost for Learnings
    ✖ Compared with React & Flutter,
    Insufficient Conclusive to use
    ✖ Existence of The Composable Architecture

    View full-size slide



  27. Final Conclusion

    View full-size slide



  28. Final Conclusion
    Not 👎
    but also not 😆

    Lots of benefits using Hooks in React & Flutter.
    How about using in SwiftUI...?

    View full-size slide



  29. Appendix
    https://github.com/ra1028/SwiftUI-Hooks
    https://reactjs.org/docs/hooks-intro.html
    https://reactjs.org/docs/hooks-reference.html
    https://pub.dev/packages/flutter_hooks
    https://logmi.jp/tech/articles/324180

    View full-size slide



  30. Thanks ✌
    CA.swift #14

    View full-size slide