6 ms·
tl;dr: use TypeScript, but don't worry so much about hooks. --- I recently switched my JS + PureComponent mobile app to TypeScript and FC Hooks. I felt motiva
by jchook 6y ago
tl;dr: use TypeScript, but don't worry so much about hooks.
---
I recently switched my JS + PureComponent mobile app to TypeScript and FC Hooks. I felt motivated to do so because:
- You cannot use hooks in PureComponent render(). The two modalities do not play nice together.
- Many of the libraries I use like react-spring and react-navigation have fully embraced hooks, sometimes without an HOC equivalent. So I felt forced to also embrace hooks or write complicated wrappers to facilitate them, for example new component lifecycle methods (e.g. componentDidFocus).
Some things I noticed...
1. TypeScript is amazing. Combined with Intellisense it has given me coding superpowers. I can write code faster and with dramatically more confidence.
2. You can incrementally shift your JS app to use TypeScript. You can even write type declarations for your JS code without rewriting it in TS. Most of your favorite libraries already have such type definitions (see DefinitelyTyped).
3. Hooks require a significantly different mental model than PureComponent. It feels horribly wasteful at first but apparently relies heavily on JS interpreter optimizations and memoization to achieve superior FMP performance[1]. My app feels noticeably snappier now, but it took a good bit of tuning to correct issues introduced during the port.
4. It IS indeed possible to write a functional wrapper that provides otherwise unavailable hook support for your Component or PureComponent. The tricky part is that you need to use a ref to invoke lifecycle methods on your wrapped component[2].
In retrospect I think I would recommend against porting an existing React project to hooks. However I would absolutely recommend porting to TypeScript, even if you do so slowly and incrementally.
1. https://medium.com/@dan_abramov/this-benchmark-is-indeed-flawed-c3d6b5b6f97f https://medium.com/@dan_abramov/this-benchmark-is-indeed-fla...
2. https://medium.com/reactnative/custom-lifecycle-methods-in-react-native-f84c7257eaa6 https://medium.com/reactnative/custom-lifecycle-methods-in-r...
- BossingAround 6y agoI was initially kind of worried about TS. It has kind of a high barrier to entry with linter settings, typescript-specific setting, solving how to compile your code easily, learning the new syntax, etc. etc. I literally spent like an hour reading up on it and learning it, and I realized I never want to go back to a plain old JS. TS feels way closer to Java than to JavaScript, with its own quirks and way of functioning of course. The barrier of entry seems perceived, but not really that big of a deal. I wonder what are the cons of TS.
- arvinsim 6y agoThe number one pain point for me is that sometimes time is wasted tracking TS error or bugs than actually solving my problem.
- nsonha 6y agoTo me I sometimes get too obsesded with types and try to wrire clever ergonomic type inference. Usally I stop when I realize the types are double loc comparing to the actual implementation or what I was trying to do was impossible. It can be a drain on productivity if you're like me.
- BossingAround 6y agoComing from Java background, I personally have no such problem. Is JS your only/main language? Maybe JS + Python?
- nsonha 6y agoNot really I played around with multiple things. Came from a Java background too. I'm in the process of trying to get to a better language actually, like scala or F#. Java seems too limited and typescript while can do a lot of things is no scala and not as clean as F#.
- reificator 6y ago> TS feels way closer to Java than to JavaScript You and I clearly have different understandings of Java, JS, and/or TS. Typescript's structural typing feels like the opposite end of the spectrum from Java's nominal types.
- BossingAround 6y ago> Typescript's structural typing feels like the opposite end of the spectrum from Java's nominal types. Be that as it may, I said nothing about type systems. I said that TS feels closer to Java than it does to JS. Seeing as JS has no type system, I fail to see your argument.