Slide 1

Slide 1 text

Using Hooks in iOS App Development CA.swift #14

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Agenda 🙅 Deep Look in SwiftUI-Hooks Codes

Slide 5

Slide 5 text

Simple Conclusion

Slide 6

Slide 6 text

Simple Conclusion Not 👎 but also not 😆

Slide 7

Slide 7 text

Simple Conclusion This is just my opinion 😓

Slide 8

Slide 8 text

What’s Hooks?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Introduction of Hooks API

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Introduction of Hooks API useState SwiftUI + Hooks SwiftUI

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

Introduction of Hooks API useEffect SwiftUI SwiftUI + Hooks

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

Introduction of Hooks API useRef SwiftUI + Hooks SwiftUI

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Introduction of Hooks API usePublisher SwiftUI + Hooks SwiftUI

Slide 24

Slide 24 text

Advantages & Drawbacks

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Final Conclusion

Slide 28

Slide 28 text

Final Conclusion Not 👎 but also not 😆 ↓ Lots of benefits using Hooks in React & Flutter. How about using in SwiftUI...?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Thanks ✌ CA.swift #14