6 ms·

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving

by arry 8y ago

What's the rationale for allowing the components to be defined as functions in the first place? As far as I can see, it has a single thing going for it: saving a line of code, at the expense of jumping through the JavaScript hoops to implement the class/function distinction described in the post. Besides, when the function component evolves and acquires the need for state or other features, the saved line of code goes right back in.

cozos 8y ago
Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.
- RoryH 8y ago
  Indeed, also checkout the React.PureComponent for another example of an in-between Class and Function optimisation.
  - quietbritishjim 8y ago
    Surprisingly, pure functional components are called even when their props haven't changed so PureComponent is not "in between" but "even more" than functional components. As for regular components, you can override this behaviour by adding a componentWillReceiveProps() method (yes, you can add a method to your functional component!).
- peterjmag 8y ago
  I like function components too, but I've seen some interesting arguments against using them: https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-f... And I wish I had a reference for this, but I seem to remember reading that any future performance optimizations that could be applied to function components could probably also be applied to class components (at least ones that contain only a render() function and nothing else). In any case, I'm hoping that React eventually gets to a point where developers don't have to make a choice between class and function components, and the compiler or the runtime makes that decision for us on a per-component basis. EDIT: As an example, here's a Babel plugin that takes care of the conversion for you at compile time: https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function https://github.com/remcohaszing/babel-plugin-transform-react.... Not sure what its heuristics are for determining what should and shouldn't be converted though, if any.
- k__ 8y ago
  Sadly (or luckily?) with hooks they aren't stateless anymore.
- city41 8y ago
  This is true in theory but the React team has not optimized them directly. React.memo is the only way to optimize them thus far.
  - orf 8y ago
    I think he's referring to the optimizations the JIT/engine will do.
IMTDb 8y ago
To me it's all about intent. By using a function instead of a class, you are basically saying "future reader, this component is nothing more than a simple mapping from those values to that DOM tree, don't try to look for internal states or any complex treatment here". Sure you could write a "normal React component without state" and do the same, but having those properties baked in the way you defined the component is much stronger.
- quietbritishjim 8y ago
  I absolutely agree with you. This makes me very skeptical about the proposed feature in React, called "hooks", which is linked to in the article. It lets you add state to your functional components, and it looks like you end up bundling all your code into one function rather than having a separate constructor to initialise the state (to me, separating out that function is a good thing). I would be interested in the motivation for that. Link: https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html
  - danabramov 8y ago
    >to me, separating out that function is a good thing To us, too, and that's exactly the point of Hooks. They let you extract logic into functions in a way that wasn't possible before. I suggest to read more than a single page -- in particular, extracting custom Hooks is largely the point of the proposal. https://reactjs.org/docs/hooks-custom.html https://reactjs.org/docs/hooks-custom.html I also wrote about this here: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 https://medium.com/@dan_abramov/making-sense-of-react-hooks-...
    - prossercj 8y ago
      That post has changed my opinion about hooks. I find this gist especially compelling: https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba82... Without hooks, that example would require adding a method (or two) to the component class. With custom hooks, that code can go into a separate module. Component bloat has been a problem for us, and if hooks can enable components to focus solely on render logic, I'd say that's an improvement.
dabbijo 8y ago
The future of React is less classes and more functions. See hooks https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html
masklinn 8y ago
> What's the rationale for allowing the components to be defined as functions in the first place? Intent: it makes clear that the component is stateless in a way a class-based component does not.
- hoppelhase 8y ago
  This is why I don't like the hooks concept introduced in the post. It breaks these semantics.
  - econnors 8y ago
    These semantics didn’t exist, anyway. Functional components can hold state through higher order components (eg connected to redux store), render props of children components, etc.
k__ 8y ago
React started with class components, because of state, I guess. Later they added function components because they are more concise and tell readers that this component is a simple mapping from props to virtual DOM elements. With hooks, a recent addition to React, they seem to move away from class components. Hooks enable you to use state and do things when a component is mounted in the DOM or removed from it inside of function components.
arcosdev 8y ago
Because in JavaScript classes are lies.

by arry 8y ago

cozos 8y ago

Functions are stateless and I believe can be better optimized. Enforcing statelessness is also a win in itself.

RoryH 8y ago
Indeed, also checkout the React.PureComponent for another example of an in-between Class and Function optimisation.
- quietbritishjim 8y ago
  Surprisingly, pure functional components are called even when their props haven't changed so PureComponent is not "in between" but "even more" than functional components. As for regular components, you can override this behaviour by adding a componentWillReceiveProps() method (yes, you can add a method to your functional component!).
peterjmag 8y ago
I like function components too, but I've seen some interesting arguments against using them: https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-f... And I wish I had a reference for this, but I seem to remember reading that any future performance optimizations that could be applied to function components could probably also be applied to class components (at least ones that contain only a render() function and nothing else). In any case, I'm hoping that React eventually gets to a point where developers don't have to make a choice between class and function components, and the compiler or the runtime makes that decision for us on a per-component basis. EDIT: As an example, here's a Babel plugin that takes care of the conversion for you at compile time: https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function https://github.com/remcohaszing/babel-plugin-transform-react.... Not sure what its heuristics are for determining what should and shouldn't be converted though, if any.
k__ 8y ago
Sadly (or luckily?) with hooks they aren't stateless anymore.
city41 8y ago
This is true in theory but the React team has not optimized them directly. React.memo is the only way to optimize them thus far.
- orf 8y ago
  I think he's referring to the optimizations the JIT/engine will do.

IMTDb 8y ago

To me it's all about intent. By using a function instead of a class, you are basically saying "future reader, this component is nothing more than a simple mapping from those values to that DOM tree, don't try to look for internal states or any complex treatment here". Sure you could write a "normal React component without state" and do the same, but having those properties baked in the way you defined the component is much stronger.

quietbritishjim 8y ago
I absolutely agree with you. This makes me very skeptical about the proposed feature in React, called "hooks", which is linked to in the article. It lets you add state to your functional components, and it looks like you end up bundling all your code into one function rather than having a separate constructor to initialise the state (to me, separating out that function is a good thing). I would be interested in the motivation for that. Link: https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html
- danabramov 8y ago
  >to me, separating out that function is a good thing To us, too, and that's exactly the point of Hooks. They let you extract logic into functions in a way that wasn't possible before. I suggest to read more than a single page -- in particular, extracting custom Hooks is largely the point of the proposal. https://reactjs.org/docs/hooks-custom.html https://reactjs.org/docs/hooks-custom.html I also wrote about this here: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 https://medium.com/@dan_abramov/making-sense-of-react-hooks-...
  - prossercj 8y ago
    That post has changed my opinion about hooks. I find this gist especially compelling: https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba82... Without hooks, that example would require adding a method (or two) to the component class. With custom hooks, that code can go into a separate module. Component bloat has been a problem for us, and if hooks can enable components to focus solely on render logic, I'd say that's an improvement.

dabbijo 8y ago

The future of React is less classes and more functions. See hooks https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html

masklinn 8y ago

> What's the rationale for allowing the components to be defined as functions in the first place? Intent: it makes clear that the component is stateless in a way a class-based component does not.

hoppelhase 8y ago
This is why I don't like the hooks concept introduced in the post. It breaks these semantics.
- econnors 8y ago
  These semantics didn’t exist, anyway. Functional components can hold state through higher order components (eg connected to redux store), render props of children components, etc.

k__ 8y ago

React started with class components, because of state, I guess. Later they added function components because they are more concise and tell readers that this component is a simple mapping from props to virtual DOM elements. With hooks, a recent addition to React, they seem to move away from class components. Hooks enable you to use state and do things when a component is mounted in the DOM or removed from it inside of function components.

arcosdev 8y ago

Because in JavaScript classes are lies.