Dan Abramov, a core React developer, writes on React patterns, Redux, hooks, and the design thinking behind them.
Commenters recommend "You Might Not Need Redux" as an excellent read, even for people who never plan to use Redux, and use it when teaching.
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…
The "You Might Not Need Redux" blog post by the author of Redux addresses your points almost directly: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
The TL;DR is Redux tries to place a set of constraints on how and when you're allowed to share state between components and how and when you're allowed mutate that shared state, much like how React and it's virtual DOM abstraction places constraints on how and when you're allowed to manipulate the DOM.
These constraints allows the library to make certain assumptions about state and state changes that enables it to perform global performance optimizations across the entire codebase (namely performing only shallow equality checks on all state-mapped props when determining whether or not to rerender, because it can assume all state changes will result in a reference change) that would otherwise have to be performed for each component on a case by case basis, and micro-optimized by each individual developer by hand.
These constraints also allows tooling authors to make these same assumptions, which is what enables the best-in-class tooling that Redux developers have access to, like time traveling debugging and state change replays. These tools would simply not be possible to build in a generalizable way if your codebase didn't allow them to make the same assumptions (and adhere to the corresponding constraints when it comes to state sharing and state mutations) as it could for a Redux codebase.
The post…
Hey there,
I'll start with the disclaimer, as lately HN comments have tendency of becoming toxic - everything I write is my personal opinion.
With that behind us I can start. I'll try to write this for someone who knows very little about JS, but knows her/his way around basic programming/cs.
Firstly I love JavaScript, I have been writing it for 10 years now, but there are bad parts of it as well.
Let's start with good stuff
* It is evolving in the right direction
* You can do a lot of things with it (web apps, games, mobile apps, server...)
* Materials for learning are everywhere
* It will be easy to find a job
Bad stuff
* It is moving at crazy to follow pace
* There are a lot of different ways of doing same things
* As it is very hip thing to do, there is a lot of bu___hit (beware of the hype train)
Learn plain javascript before moving to frameworks. Focus on ES6 and new stuff as it will make your life way easier.
* Someone already mentioned Dr. Axel Rauschmayer, pick any of his books - http://exploringjs.com/
* Another good one is You Dont Know JS - https://github.com/getify/You-Dont-Know-JS
Try to make small app on your own. You'll get into all sort of problems, but that's the fun part I guess. That will help you to understand what frameworks are trying to solve.
Then you can start learning one of the frameworks. React, Vue, Angular are all solid choices. My pick is React, as I know it best. Apply the same mindset as with learning plain JS. Try to write…
That perception of the DOM/VDOM situation is and always was false. React was always slower at runtime than a carefully-engineered system designed for performance.
As Dan Abramov said a couple of years later <https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a>, people were missing the point of React: it was never about VDOM; rather, that was a cost that at the time they reckoned had to be paid in order to write reliable code in an immediate mode style, because if you tried doing that without DOM reconciliation the result would be atrociously bad. VDOM came about because the alternative (the consistently faster alternative, I may add) entailed things like explicit DOM mutation that was far too easy to make mistakes with, and reactive data flow was generally even buggier. It was a carefully-chosen trade-off: shedding some performance, for greater robustness and ease of use.
“DOM is slow, VDOM is fast” was a straw man comparison that entered the public perception but which the React team mostly stayed well clear of: almost no serious systems have ever used the DOM directly in the immediate mode style, because it has obvious and serious problems in both performance and transient UI state like scroll and caret positions and element focus (… and transient state things are problems for all immediate mode interfaces, not just DOM ones: escape hatches are fundamentally required).
Was VDOM worth the cost at the time, compared with the other options then…
Redux is just one piece of the puzzle. Let me try to explain the problem it solves. Let's say if you are building a complex SPA with lot of UI components in the view and state changes impacts several parts of the view. You can build this view in several ways:
* Plain javascript with jquery - We can surely achieve it but the code quickly becomes a soup of callbacks and events handlers. After a while the code becomes unmanageable. This is pretty much the approach you're suggesting with getters/setters.
* AngularJS's dirty checking is one solution. It works and the code scales in large teams but perf suffers in complex views due to costly digests. It doesn't provide a way to conditionally exclude a sub-view from the digest cycle. This will become the main bottleneck (for perf) as the application grows.
* React and Angular 2/4 - React (shouldcomponentupdate) and Angular 2/4 (onpush change detection) leverages immutability very well to cut down re-render cycles. This is where Redux shines with its immutable way of changing state. It's uni-directional flow is another great benefit to keep the entire flow predictable and maintainable.
I am not saying all these things are needed for every SPA app out there. But these optimizations are needed for complex and performance sensitive applications. Check this out - https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Also, I know keeping application state as a single state tree is nothing new. I started this side…
> In order to be able to tell if you need Redux or not for a project, you need to know Redux
Not according to the creator of Redux. His advice is "Instead learn to think in React. Come back to Redux if you find a real need for it, or if you want to try something new. But approach it with caution, just like you do with any highly opinionated tool."
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
> too many developers overestimate their intelligence and write awful code because they didn't take the time to learn well the tools
No argument there. You do have to go through the entire official tutorial, and I would also recommend the article "Thinking in React", that Dan Abramov referenced above. https://reactjs.org/docs/thinking-in-react.html
I'm not claiming your experience with awful code isn't real, I'm sure it is. But is it because React is difficult to learn? When I learned React I was already good at JavaScript. And I had already learned Angular. Angular took me over a month to start to feel comfortable, and I still felt like I was stumbling around in the dark. The Angular API is very big. With React I was writing code, and code that I still use, within days. And I felt comfortable that I mostly knew what I was doing. When my code got a little more complex, I took a few hours to read about and learn about Higher Order Components. And when I needed routing I taught myself React Router in one day, and began answering questions about it on…