5 ms·

While I agree that class components has always felt like a workaround to bypass the limitations of function components, and that it's obviously annoying to rewr

While I agree that class components has always felt like a workaround to bypass the limitations of function components, and that it's obviously annoying to rewrite a function component to a class component just to add a state or a lifecycle method, the following explanation sounds a bit silly to me: > In our observation, classes are the biggest barrier to learning React. You have to understand how this works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable syntax proposals, the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers. A framework shouldn't be designed around the fact that people don't know the language they are using, right? Anyway, those hooks look like a good way to solve the issues listed above. Can't wait to try it out!

vinceguidry 8y ago
At the end of the day, the framework that allows people to get more done with less thought is going to win the most mindshare.
- cmx66 8y ago
  That is unfortunately not true. The framework with the best marketing will win. That's why frameworks like angular and react are so popular. Both are designed to work well in large teams that work on huge codebases. Most of us probably would came along with much much simpler solutions.
  - vinceguidry 8y ago
    So are you telling me Facebook has a serious marketing budget for React? If so, that means tech has gotten way way crazier than I could ever have imagined. There's a complexity angle that needs to be appreciated. I love Rails, I think it's the best solution to the problem it tries to solve for the people it wants to solve that problem for. But it's been called overly-complex and magical. But less-complex, less-magical frameworks just don't solve the problem as well. Just try building something big with Sinatra and you'll see what I mean. I'm not terribly familiar with Angular, but React, when you remove it from its ecosystem and treat it as just a library-framework, does a great job at facilitating the building of user interfaces. The abstractions and underlying paradigm are somewhat hard to grasp, but once grasped, a competent architect can lay down patterns that juniors can implement. A lot can get done in a small amount of time with React. The people that managed to do this in the beginning are the ones who christened React the Son of UI Development. People listened, and now we have the Church of React, with the Redux Reformation now upon us. Facebook had nothing to do with it, that was all us.
beatgammit 8y ago
To be fair, JavaScript has been a moving target and things like classes are quite new. Then again, it doesn't make sense to avoid features just because they're new. I think the point is that they want to provide two ways to do simple things: classes and functions. Functions have better performance, classes are more flexible.
- krapp 8y ago
  >I think the point is that they want to provide two ways to do simple things: classes and functions. At the risk of seeming like an old man complaining about new things, what problem would "classes" solve in javascript that the existing object syntax, which allows for inner functions and variables, doesn't?
  - deleted 8y ago
    [deleted]
  - WorldMaker 8y ago
    Prototypal inheritance, and scope controls more refined/easier to work with than IIFEs. In the end the class notation is "simply" syntax sugar giving the object syntax the benefit of Function.prototype and IIFE closures, without having to resort to layers of either/both.
schneidmaster 8y ago
In the live talk, Sophie also discussed how Javascript classes are difficult for machines: minifiers aren't able to shorten the names of methods (because it's apparently hard to work out all the ways that the method could be invoked), and they cause stability problems with hot code reloading. So there are benefits beyond ease of use for humans. (Also, I'm pretty fluent in Javascript and I still forget to bind event handlers all the time, which suggests to me that it's a counterintuitive pattern even if I know "how it works" on a technical level. And you either have to put a bunch of "this.handler = this.handler.bind(this)" in the constructor, or rely on class properties which are an unstable syntax feature, both of which are suboptimal.)
- adpirz 8y ago
  It may have been on purpose (came off as a sincere mistake), but Dan Abramov forgets to bind them in this talk while giving an example. It's a very common problem, even for the authors of React itself :)
  - azangru 8y ago
    It did come off as a sincere mistake, but remember, they had a dry run of the talks a day or so before. So could have easily been staged. But was hilarious anyway.
- Touche 8y ago
  You can just do `onChange={() => this.handler()}`.
  - jotaen 8y ago
    This would create a new inline function on every render though, which potentially might cause rendering performance issues.
    - Touche 8y ago
      The Hooks way creates a lot of inline functions on every render.
coldtea 8y ago
>A framework shouldn't be designed around the fact that people don't know the language they are using, right? No, but it could be designed around the fact that some of the language features are confusing or crap.
paultannenbaum 8y ago
Another great option to bypassing the limitations of functional components is using a higher order component library like recompose[0]. Does have somewhat of a higher learning curve, but I personally consider it a must have tool on all my projects. [0]: https://github.com/acdlite/recompose https://github.com/acdlite/recompose
- sorahn 8y ago
  FYI. https://github.com/acdlite/recompose/commit/7867de653abbb57a49934e52622a60b433bda918 https://github.com/acdlite/recompose/commit/7867de653abbb57a...
- deleted 8y ago
  [deleted]

vinceguidry 8y ago

At the end of the day, the framework that allows people to get more done with less thought is going to win the most mindshare.

cmx66 8y ago
That is unfortunately not true. The framework with the best marketing will win. That's why frameworks like angular and react are so popular. Both are designed to work well in large teams that work on huge codebases. Most of us probably would came along with much much simpler solutions.
- vinceguidry 8y ago
  So are you telling me Facebook has a serious marketing budget for React? If so, that means tech has gotten way way crazier than I could ever have imagined. There's a complexity angle that needs to be appreciated. I love Rails, I think it's the best solution to the problem it tries to solve for the people it wants to solve that problem for. But it's been called overly-complex and magical. But less-complex, less-magical frameworks just don't solve the problem as well. Just try building something big with Sinatra and you'll see what I mean. I'm not terribly familiar with Angular, but React, when you remove it from its ecosystem and treat it as just a library-framework, does a great job at facilitating the building of user interfaces. The abstractions and underlying paradigm are somewhat hard to grasp, but once grasped, a competent architect can lay down patterns that juniors can implement. A lot can get done in a small amount of time with React. The people that managed to do this in the beginning are the ones who christened React the Son of UI Development. People listened, and now we have the Church of React, with the Redux Reformation now upon us. Facebook had nothing to do with it, that was all us.

beatgammit 8y ago

To be fair, JavaScript has been a moving target and things like classes are quite new. Then again, it doesn't make sense to avoid features just because they're new. I think the point is that they want to provide two ways to do simple things: classes and functions. Functions have better performance, classes are more flexible.

krapp 8y ago
>I think the point is that they want to provide two ways to do simple things: classes and functions. At the risk of seeming like an old man complaining about new things, what problem would "classes" solve in javascript that the existing object syntax, which allows for inner functions and variables, doesn't?
- deleted 8y ago
  [deleted]
- WorldMaker 8y ago
  Prototypal inheritance, and scope controls more refined/easier to work with than IIFEs. In the end the class notation is "simply" syntax sugar giving the object syntax the benefit of Function.prototype and IIFE closures, without having to resort to layers of either/both.

schneidmaster 8y ago

In the live talk, Sophie also discussed how Javascript classes are difficult for machines: minifiers aren't able to shorten the names of methods (because it's apparently hard to work out all the ways that the method could be invoked), and they cause stability problems with hot code reloading. So there are benefits beyond ease of use for humans. (Also, I'm pretty fluent in Javascript and I still forget to bind event handlers all the time, which suggests to me that it's a counterintuitive pattern even if I know "how it works" on a technical level. And you either have to put a bunch of "this.handler = this.handler.bind(this)" in the constructor, or rely on class properties which are an unstable syntax feature, both of which are suboptimal.)

adpirz 8y ago
It may have been on purpose (came off as a sincere mistake), but Dan Abramov forgets to bind them in this talk while giving an example. It's a very common problem, even for the authors of React itself :)
- azangru 8y ago
  It did come off as a sincere mistake, but remember, they had a dry run of the talks a day or so before. So could have easily been staged. But was hilarious anyway.
Touche 8y ago
You can just do `onChange={() => this.handler()}`.
- jotaen 8y ago
  This would create a new inline function on every render though, which potentially might cause rendering performance issues.
  - Touche 8y ago
    The Hooks way creates a lot of inline functions on every render.

coldtea 8y ago

>A framework shouldn't be designed around the fact that people don't know the language they are using, right? No, but it could be designed around the fact that some of the language features are confusing or crap.

paultannenbaum 8y ago

Another great option to bypassing the limitations of functional components is using a higher order component library like recompose[0]. Does have somewhat of a higher learning curve, but I personally consider it a must have tool on all my projects. [0]: https://github.com/acdlite/recompose https://github.com/acdlite/recompose

sorahn 8y ago
FYI. https://github.com/acdlite/recompose/commit/7867de653abbb57a49934e52622a60b433bda918 https://github.com/acdlite/recompose/commit/7867de653abbb57a...
deleted 8y ago
[deleted]